Trouble with Dynamic Imports in React Native TypeScript component

I'm encountering an issue with dynamic imports in a React Native app using TypeScript. I'm attempting to dynamically import JSON files based on a reference prop in one of my components, but I'm facing an error that I can't resolve.

import React, { useEffect, useState } from "react";import { View, Text } from "react-native";import styles from "./styles";type Props = {  reference: string;};const Block = ({ reference }: Props) => {  const [unit, setUnit] = useState<any[]>([]);  useEffect(() => {    const fetchData = async () => {      try {        const module = await import(`../../../assets/data/topics/${reference}`);        setUnit(module);      } catch (error) {        console.error("Error loading data:", error);      }    };    fetchData();  }, [reference]);  return (<View style={styles.container}>      {unit.map((block: any) => (<View key={block.blockId} style={styles.blockBox}><Text style={styles.boxText}>{block.blockName}</Text></View>      ))}</View>  );};export default Block;

The reference prop is just a string for the end of the path units/top-1-sec-1-unit-1.json.

The error I'm seeing is:

Invalid call at line 16: import(../../../assets/data/topics/${reference})

I've checked the path, and it seems correct. Any ideas on what might be causing this issue? I'd appreciate any help or guidance. Thank you!