Unable to load image files in the display when using virtualization from Tanstack Virtual and Million JS

Question

I have a problem when using virtualization methods from Tanstack Virtual and Million JS. I have a React JS program code that aims to load all image files from the local folder at src/assets/images to be displayed, but the result is that my code is not working as intended. The code I created does not display any images; instead, it shows a white screen. Below, I present the code and a screenshot of the result.

Below is the code that I have developed:

import React from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { For } from 'million/react'

const Images = () => {
    const parentRef = React.useRef(null);

    const imageModules = import.meta.glob('/src/assets/images/*.{png,jpe?g,jpg}');
    const gallery = Object.keys(imageModules).map((path) => {
        const imageUrl = new URL(path, import.meta.url).href;
        return imageUrl;
    });
    const imgCount = gallery.length;

    debug: true
    const rowVirtualizer = useVirtualizer({
        count: imgCount,
        estimateSize: () => 100,
        getScrollElement: () => parentRef.current,
    })

    const virtualItems = rowVirtualizer.getVirtualItems();

    return (
        <div className="flex gap-4 " ref={parentRef}>
            <For
                each={virtualItems}
                style={{
                    height: `${rowVirtualizer.getTotalSize()}px`,
                    width: '100%',
                    position: 'relative',
                }}
                as="div"
            >
                {(item) => (
                    <div
                        key={item.key}
                        style={
                            {
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                width: '100%',
                                fontSize: '20px',
                                height: '100%',
                                transform: `translateY(${item.start}px)`,
                            }
                        }
                    >
                        {/* Image {item.index} */}
                        <a href={item.key} target="_blank" rel="noopener noreferrer">
                            <img
                                src={item.key}
                                alt={`Image ${item.index}`}
                            />
                        </a>
                    </div>
                )}
            </For>


        </div>
    );
};

export default Images;

The result:

I earnestly hope that my fellow individuals here can provide advice for me, as this is crucial to me. Thank you