Using an image path passed in props React, without import

I have lots of images in my project that I want to use dynamically depending on the user’s needs. So I’m having a local db.js file having all the images paths and I’m passing them as props to be displayed but it’s not working. I also can’t import 50+ images in the component, there has to be an easier way.

function Component(props){
    return(
        <div>
            <img src={props.src} alt="..."/>
        </div>
    )
}

The above code doesn’t work as the relative path of the image is passed from the props, what can I do to dynamically import the passed path from the prop and use it in the src?

I tried this code to import the passed prop, but it didn’t work as well.

function Component(props){

    async function importImage(){
        const img = await import(props.src)
        return img.default
    }

    return(
        <div>
            <img src={importImage()} alt="..."/>
        </div>
    )
}