So I have this problem: I'm trying to create a 3D carousel of cars, and I'm using a lib to convert a gltf model into a react component. Now I'd like to create a HOC that would dynamically import each car component according to the mapped car.


Here some relevant code:

const DynamicCarModel = ({ componentPath }: { componentPath: string }) => {
// component path the path to the car's related component
  const CarComponent = lazy(() => import(componentPath))
  return (
    <Suspense fallback={null}>
      <CarComponent />
    </Suspense>
  )
}

const CarFormation3DItem = ({ car }: { car: CarType }) => {
  return (
    <DynamicCarModel componentPath={car.componentPath} />
  )
}

const CarFormation3D = () => {
  return (
    <Canvas
      className="w-full h-full"
      camera={{
        fov: 50,
        position: [1, 20, 0],
      }}
    >
      <ambientLight intensity={3} />
      <directionalLight position={[0, 5, 5]} intensity={5} />
      {cars.map((car) => (
        <CarFormation3DItem key={car.id} car={car} />
      ))}
      <OrbitControls />
    </Canvas>
  )
}

export default CarFormation3D

car item:

 {
        id: 1,
        model: "Bugatti Veyron",
        manufacturingYear: 2009,
        mileage: 15000,
        price: 2.4,
        acceleration: 3.7,
        horsepower: 455,
        dealer: "Bugatti",
        componentPath: "/src/components/cars/models/bugatti.jsx",
        imageUrl: "/images/corvette_c7.png",
        videoUrl: "/videos/corvette_c7.mp4",
        photoUrls: [
            "/corvette_c7_1.jpg",
            "/corvette_c7_2.jpg",
            "/corvette_c7_3.jpg",
        ],
        description:
            "Experience the pinnacle of American engineering with the Corvette C7. This iconic sports car combines breathtaking performance with sleek, aggressive styling. Boasting a powerful V8 engine, precision handling, and cutting-edge technology, the C7 delivers an exhilarating driving experience that's hard to match. Whether on the track or the open road, the Corvette C7 stands as a testament to speed, innovation, and pure automotive passion.",
    },

And im getting this error :

Unhandled Runtime Error
Error: Cannot find module '/src/components/cars/models/bmw.jsx'

idk why Next.js does not find related file, even if the file path seems correct. Tried with and without the first / ; same result

Do someone have a solution ? Thanks !