Can I use a computed value in the parentheses of `require()` in JavaScript/React?

I have a really simple app, that has a button. When you press the button, the app plays a sound. When I set the path of the file for the sound, I use require(`./assets/${array[0].bgm}.mp3`). However, I get an error.

How can I make it work?

Here is an array, where I'm going to get the name bgm for the path:

array.js

const array = [ { id: 1, name: "Ken", bgm: "bgm", }, ]; export default array; 

Here is app.js.

import * as React from "react"; import { Text, View, StyleSheet, Button } from "react-native"; import { Audio } from "expo-av"; import SoundPlayer from "./SoundPlayer"; export default function App() { return ( <View style={styles.container}> <SoundPlayer /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", backgroundColor: "#ecf0f1", padding: 10, }, }); 

Here is another file that contains require()

import * as React from "react"; import { Button } from "react-native"; import { Audio } from "expo-av"; import array from "./array"; export default function SoundPlayer() { const [sound, setSound] = React.useState(); async function playSound() { console.log("Loading Sound"); if (sound) { console.log("Unloading Sound"); await sound.unloadAsync(); } const { sound: newSound } = await Audio.Sound.createAsync( require(`./assets/${array[0].bgm}.mp3`) // This doesn't work. //require("./assets/bgm.mp3") //This just works. ); setSound(newSound); console.log("Playing Sound"); await newSound.playAsync(); } React.useEffect(() => { return sound ? () => { console.log("Unloading Sound"); sound.unloadAsync(); } : undefined; }, [sound]); return <Button title="Play Sound" onPress={playSound} />; } 

However, this throws an error:

error: SoundPlayer.js: SoundPlayer.js:Invalid call at line 17: require("./assets/" + _array.default[0].bgm + ".mp3")

I need some help. How would you solve this problem? Thank you in advance.