Why Does Plugging in Results from .map() into JSX Result in an Error?

Question

Can someone help me understand why I am getting an error when I'm trying to apply values within my source prop?

I have the following block of code between render(){ and return(. It maps through an array of videos hosted locally with their corresponding paths.

render() {

const { loadVideo } = this.state;

let videoComp = [];
if(loadVideo){
  videoOptions.map((videoOptions) => {
    console.log('videoOptions console:',videoOptions.video)
    console.log('id console:',videoOptions.id)
    videoComp = (
      <Video 
        source={require(videoOptions.video)}   // this line produces an error
        key={videoOptions.id}
      />
    )
  })
}

return (

This code as-is returns the following error.

TransformError src/components/home/HomeScreen.js:
src/components/home/HomeScreen.js:
Invalid call at line 98:
require(videoOptions.video)

However, if I take out the line source={require(videoOptions.video)}, the error goes away and the two logs do spit out correct data.

Of course if I were to hard code source, everything is fine and dandy.

render() {

const { loadVideo } = this.state;

let videoComp = [];
if(loadVideo){
  videoOptions.map((videoOptions) => {
    console.log('videoOptions console:', `../../assets/videos/${videoOptions.video}`)
    console.log('id console:',videoOptions.id)
    videoComp = (
      <Video 
        source={require('../../assets/videos/087194062-dodgers-stadium_608x1080.mp4')}
        key={videoOptions.id}
      />
    )
  })
}

return (

EDIT: I removed a blurb asking why using a template literal inside require was also returning an error. That issue is a duplicate