Conditional imports based on props

In my React Native App I have around 200-300 custom SVG components (of dog breeds) that are converted into .tsx files using the react-native-svg library.

I want to dynamically import only one of the SVG components into another component called DogTag to avoid importing all the 300 files. The DogTag should take in a prop (dogBreed: string) to determine which DogBreed component it should import. I have been able to lazy load the components, but this dose not work if I want to pass in the prop in the lazy importing. E.g.

import React, { lazy, Suspense } from 'react';...interface DogTagProps {  dogBreed: string;}function DogTag({ dogBreed }: DogTagProps) {  const DogIcon = lazy(() => import(`../components/svg/${dogBreed}`));  return (<View><Suspense fallback={<View style={styles.someStyle} />}><DogIcon /></Suspense><Text>{dogBreed}</Text></View>  );}...

The HorzontalList that should render x amount of dogTags:

interface ListProps {  title: string;  data: string[];}function HorizontalList({ data, title }: ListProps) {  return (<View style={styles.container}><ScrollView style={styles.listItems} horizontal={true} showsHorizontalScrollIndicator={false}>        {data.map((item, index) => (<DogTag key={index} dogBreed={item} />        ))}</ScrollView></View>  );}

The data being passed into the Horizontal List:

const dogData = ['BorderCollie', 'StaffordshireBullTerrier', 'Boxer'];

Generally speaking, I wonder what the best way to import/render multiple components based on a list of strings? So in the dogData example it should render 3 dogTags that each import the BorderCollie.tsx, StaffordshireBullTerrier.tsx and Boxer.tsx file.

This is the folder structure:

app│   README.md│   App.tsx│   ...│└───components││└───tags││   DogTag.tsx│   ...│└───svg│   DogBreed1.tsx│   DogBreed2.tsx│   ...│   DogBreed300.tsx...