I want to show some images depending on how many I get through an array, so I can't really use an import statement.

I googled and I had found that I could just use require(), but it doesn't work as expected.

GameImage.tsx

import './css/GameImage.css';

type Image = {
    imgSrc: string,
    imgAlt: string
}

type Images = {
    images: Array<Image>
}

function GameImage(props: Images) {
    return (
    <div className="game-details-image-wrapper">
        {props.images.map((pair) => (
            <img className="game-details-image" src={require(pair.imgSrc).default} alt={pair.imgAlt} />
        ))}  
    </div>);
}

export default GameImage;

how I render it:

<GameImage images={[{imgSrc: './img/Untitled.png', imgAlt: 'test'}]}/>

This way, I will get

Cannot find module './img/Untitled.png'

but if I modify the img tag like this:

<img className="game-details-image" src={require("./img/Untitled.png").default} alt={pair.imgAlt} />

it works properly.

Why does it happen and how can I fix it?