How to make Dynamic component and dynamic import in React [duplicate]

I want to import only the components that are present in a list.

A list contain all value checked by a user

for example, here is the default list :

const Defaultlist = [
    {
      name: 'test one',
      id: 1,
      componentName: 'TestOne',
    },
    {
      name: 'test two',
      id: 2,
      componentName: 'TestOne',
    },
  {
      name: 'test three',
      id: 3,
      componentName: 'TestThree',
    },
  ];

and here the selection from my user

 const List = [
    {
      name: 'test one',
      id: 1,
      componentName: 'TestOne',
    },
    {
      name: 'test two',
      id: 2,
      componentName: 'TestTwo',
    },
  ];

I was thinking of mapping and create a dynamic component as below, But how can I make “dynamic” import ? Am I on the good way if I do it like that ?

import React from 'react';
import { useSelector } from 'react-redux';
//import { OneComponent } from `./${dd}`;

export const ListChoice = ({ control, watch }) => {

  const langue = useSelector((state) => state.langue.langueSelected);
  const List = watch('user.list');

  return (
    <div>
      <h2 className="title">{langue?.pleaseSelect}</h2>
      {List?.map((el) => {
        const OneComponent = el.componentName;
        return <OneComponent />;
      })}
    </div>
  );
};