I'm trying to import files / components but getting the error that the module is not found

This is where I'm trying to import it

const PageBuilder: NextPage<PageProps>  =  async ({ themeName, jsonData }) => {
  const componentsMap: ComponentsMap = {};

    for (const key of Object.keys(jsonData)) {
        try {
            const componentPath = (`@/theme/${themeName}/component/${key}.`);
            const componentModule = await import(componentPath);
            componentsMap[key] = componentModule.default;
        } catch (error) {
            console.error(`Failed to load component ${key}`, error);
            componentsMap[key] = null;
        }
    }

  return (
    <main>
      {Object.entries(jsonData).map(([key, value]) => {
        const Component = componentsMap?.[key] || null;
        return (
          <section key={key}>
            {Component ? <Component {...value as React.ComponentProps<any>} /> : <p>Component not found for {key}</p>}
          </section>
        );
      })}
    </main>
  );
};

for the componentPath I've tried it with the @, ../../ and hardcoded C:/dev/blablabla

But always getting the same error

Failed to load component section Error: Cannot find module '@/theme/themename/component/section.tsx'
    at \.next\server\app\[...url]\page.js:25:11
    at async PageBuilder (webpack-internal:///(rsc)/./components/page/pagebuilder.tsx:22:37) {
  code: 'MODULE_NOT_FOUND'
}

I've also tried to use getServerSideProps but that never seemed to be called so gave up on that