Dinamic react component

Question

Please, tell me how to solve the following problem. I'm writing a news application. The content of each post piece (title, several illustrations, date of creation, section, abstract, part of the text) is entered into the MongoDB database. Each news respectively contains a unique id. All this is done, not difficult.

Each news should also have a piece of unique code (html + js, as a rule), which I plan to enter manually. For example, canvas elements. Thus, to introduce original design elements into each post item.

I planned to solve this problem by creating a js file for each news containing a component. The file is created manually, wrapped in a component, say, ArtBlock, and uploaded to the server in a separate folder during the creation of the article, using the same method as the illustrations for the article. The file name must match the article id in order to automatically find it in the appropriate folder through props and import it to the article page.

For these purposes, I planned to use the dynamic import @loadable/component:

const Post = ({ post }) => {
  const { loading, error, data } = useQuery(IS_LOGGED_IN);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  let arr = post._id;
  const ArtPage = loadable(post => import(`../arts/${arr}`));

  return (
    <article>
    <ArtPage />
    <div id={post._id}></div>
    <ImgStyle>
      <img src={post.imageUrl} />
    </ImgStyle>
      <H2>{post.title}</H2>
      <Link style={linkStyle} to={`/cats/${idcat}`}>
        <H4R>{post.category.catname}</H4R>
      </Link>
      <H4R>{post.createdAt}</H4R>
      <Link style={linkStyle} to={`/users/${iduser}`}>
        <H4R>{`author ${post.author.name}`}</H4R>
      </Link>
      <H4R>{`views ${post.viewsCount}`}</H4R>
      <PRiv4>
        <ReactMarkdown children={post.body}  />
      </PRiv4>
    </article>
  );
};

But the code stubbornly refuses to work. In this case, if you remove the variable and insert specifically the name of the file, the component is loaded.

const ArtPage = loadable(post => import(`../arts/63addc830407bc4b94f5d965`));