I have the following imports in my project:

import video1 from '../../assets/video1.mp4';
import video2 from '../../assets/video2.mp4';

and the following code:

...
constructor(props){
    super(props)
    this.state={
        videoURL: this.props.source,
    }
}
render(){
return(
<div className='app'>
    <video onTimeUpdate={(e) => this.videoBuffer(e)} id="videoPlayer" ref="VidRef" src={this.state.videoURL} muted={this.state.muteVideo} onClick={(e) => this.togglePlayPause(e)} autoPlay></video>
</div>
)}

after i get back the props from another component, they appear as string, ie, "video1" and "video2" which are then passed to src of the video component. Unfortunately i am not able to render the video component as

src="video1"

is not valid. Is there a way to convert "video1" to the import that i have made above in line 1? since i have thousands of videos, i cannot use arrays.

i also do not want to use dangerouslysetinnerhtml to avoid any openings to xss attacks.