Dynamic import of component based on variable name in NextJS

I'm looking for a way to use a component in a dynamic way:

const getDynamicComponent = (componentName) => dynamic(() => import(${componentName}), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

const Test = () => {
  const router = useRouter();
  const { component } = router.query;
  
  const DynamicComponent = getDynamicComponent(component);

  return <DynamicComponent />
}

Obiovusly if I specify a folder name there like components/${componentName} it searches ALL components.. and not the one specified in the variable. I know the documentation states explicitly that template strings are not an option for dynamic imports, but I would like to know how I would be able to import a specific component from node_modules, without importing all node_modules folder 🙂

Only static strings are permitted?

I have a dynamic route file as [componentId].js which should import its component from node_modules based on the route name.. any ideas?

Should I try to configure babel in a specific way to make this work?

Thanks!

PS: I know it was asked here, but those answers are not quite correct as the whole folder is trying to get imported, not just the component specified.