Как обернуть js [{объект}] массива в тег

есть массив с фото

const photos = [
    {
        src: "",
        width: 3,
        height: 4
    }]

задаю класс объекту через

    export const withClass = photos.map(photos => ({
    ...photos,
    className: "img-letter",
}));

Мой объект на выходе "img"

function LetterBlock() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);

const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
}, []);

const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
};

return (
    <div className='sdsdsd'>
        <Gallery photos={withClass} onClick={openLightbox} />
        <ModalGateway>
            {viewerIsOpen ? (
                <Modal onClose={closeLightbox}>
                    {withClass.map(classname => (
                        <div className={classname}></div>
                    ))}
                    <Carousel
                        currentIndex={currentImage}
                        views={withClass.map(x => ({
                            ...x,
                            srcset: x.srcSet,
                            caption: x.title,
                        }))}
                    />
                </Modal>
                ) : null}
        </ModalGateway>
    </div>
);

};

export default LetterBlock;