Заставить компонент многократного использования читать значения Dynami c в reactjs

Question

Я сейчас застрял в создании компонента многократного использования. У меня есть большие трехмерные модели, которые мне нужно импортировать, и я хочу, чтобы импорт происходил тогда, когда пользователь действительно хочет получить к нему доступ, а не когда приложение загружается, чтобы сделать начальную загрузку быстрее.

В настоящее время у меня есть отдельная функция для обработки каждой 3d-модели, и я пытаюсь заменить их одним повторно используемым компонентом, который будет динамически обрабатывать импорт модели.

Итак, на данный момент Компонент 1 вызывает отдельные функции с именами моделей, которые затем вызывают Компонент 3, который визуализирует модель. Я выполняю импорт всех моделей вместе и передаю их компоненту 3, который выполняет рендеринг 3d-модели. Здесь необходимо создать компонент 2 для повторного использования и определить во время выполнения, какую модель следует передать компоненту 3 для рендеринга. Вот мой код

Компонент 1

  export default function CardArea(prop) { 
  return (
    <Card>
      <CardActionArea>
        <CardMedia
          image={prop.media}
          title="Contemplative Reptile"
          component={Link}
          to={{
            pathname: "/topic", // the path topic is mapped to component 2 called "Topic"
            state: { 
              modelname: 'solarsystem'                  
             }
          }}
        />
      </CardActionArea>
    </Card>
  );
}

Компонент 2 (или фактическое имя Topi c) импортирует все модели одновременно, а затем вызывает компонент 3 для их рендеринга. Я пытаюсь заставить Компонент 2 под названием «Топи c» импортировать только ту модель, которую компонент 1 передал в качестве опоры, а затем передать ее Компоненту 3. Вот мой текущий код для Компонента 2

Компонент 2 (Topi c)

import solarsystem from ".././model/solar_system.glb";
import earthmodel from ".././model/earth.glb";
import moonmodel from ".././model/moon.glb";

export const Topic = (props) => {
  return (
            <Grid container spacing={1}>
              <Grid item xs={12} sm={6}>

                <ModelViewer src={solarsystem} /> // this here is the call to Component 3 which renders the model passed as a prop. I want to make this value dynamic. In this example I pass the solarsystem as the imported model. How can I make it a variable and pass any imported model at the run time
              </Grid>
            </Grid>  
  );
};

Большое спасибо за вашу помощь. Я пытался понять это довольно давно.