I am segmenting code and have a array of object containing template literals. When I move the code to separate file and import it i get an error because my template literal isn't defined. If I define it in the export it stays the same when I import it. However, this works fine if the data is contained in the module it self.

How do I do this the correct way?

Export

const name = "temporary"

export const my_questions = [
  {
    id: 0, question: `What is ${name}'s favorite animal?`, alternative: [
      { answers: "Cat", img: "href" },
      { answers: "Dog", img: "href" },
      { answers: "Bird", img: "href" },
    ]
  }
]

export default {
  my_questions
}

Import

import {my_questions} from './data/data_questions'

function App(){

 const TemplateTest = ({name, my_questions}) => {
    return (
      <>
         { my_questions.map(x => <p>{x.question}</p>) }
      </>
    )
  }

   return (
     <div>
        <TemplateTest name="Rusty" my_questions={my_questions}/>
        // What is temporary's favorite animal?
     </div>
   )
}