How to add a block after the sixth element?

[GreenEyeInvestor]

Hello. I need to add an additional component consisting of an image with a link to the news of the site, after the 6th element, how can I do this?

At the moment I'm just expanding the selection and checking the condition

<PhotoAlbum
            layout="masonry"
            photos={data as any}
            defaultContainerWidth={props.defaultWidth}
            breakpoints={[400, 900, 1200]}
            columns={(containerWidth) => {
                if (containerWidth < 400) return 1;
                if (containerWidth < 900) return 2;
                return 3;
            }}
            renderColumnContainer={({ columnContainerProps, children }) => (
                <div className={stylesGrid.container}>{children}</div>
            )}
            renderContainer={({ containerProps, containerRef, children }: RenderContainerProps) => (
                <div ref={containerRef} className={stylesGrid.wrapper}>
                    {children}
                </div>
            )}
            renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto, layout }: any) => {
                if (photo?.invite === "news") {
                    return <NewsInviteElementComponent />
                }
                return (
                    <ViewPhotoColumnElementComponent data={photo} count={count} />
                )
            }}
        />

But it's not very convenient, I would like to do something like this

renderPhoto={({ photo, wrapperStyle, renderDefaultPhoto, layout }: any) => {
                if (layout?.index=== 6) {
                    return <NewsInviteElementComponent />
                }
                return (
                    <ViewPhotoColumnElementComponent data={photo} count={count} />
                )
            }}

But this way I will face the problem of losing element number 6 =(

[igordanchenko]

Unfortunately, your question doesn't provide sufficient details to paint the full picture, so I'll be making some assumptions.

You can use the following approach to add additional content after the last element in masonry layout:

<PhotoAlbum
    columns={3}
    layout="masonry"
    photos={photos}
    renderPhoto={({ layout, renderDefaultPhoto }) => (
        <>
            {renderDefaultPhoto()}
            {layout.index === photos.length - 1 && <div>Additional content</div>}
        </>
    )}
/>

Does this answer your question?

[GreenEyeInvestor]

Yes, it's very strange, I also brought it out yesterday and nothing worked out for me, but today everything worked =) Thank you very much =)