Ghost Gallery in React

import React, { useEffect } from 'react'
import useGallery from '../hooks/useGallery'

const Gallery = ({ children, caption }) => {
    const [rows, resizeOnLoad] = useGallery(children)

    useEffect(resizeOnLoad, [])

    return (
        <figure>
            <div className="flex flex-col mx-auto my-6 max-w-5xl">
                {rows.map((images, i) => (
                    <div className={`flex flex-row justify-center${i == 0 ? '' : ' mt-3'}`} key={i}>
                        {images.map((image, i) => (
                            <div key={i} ref={image.ref} className={i === 0 ? '' : 'ml-3'} style={{ flex: `${image.width / image.height} 1 0%` }}>
                                {image.el}
                            </div>
                        ))}
                    </div>
                ))}
            </div>
            {caption && <figcaption>{caption}</figcaption>}
        </figure>
    )
}

export default Gallery