I'm at a loss, MotionCanvas does not allow me to do anything?

[luigimannoni]

I have this really basic scene, which I quickly laid out to test framer 3d, I use already framer for css transitions so I would like to keep an unique ecosystem for everything instead of mixing it up with other spring libraries.

The problem I am having (I am using nextjs, not sure if that matters) is that I cannot render anything inside the motioncanvas element, from basic meshes to the example below, what I get is a flurry of errors like these:

Error: R3F: OrthographicCamera is not part of the THREE namespace! Did you forget to extend?

Tried to swap few things (maybe ContactShadows from drei is not supported) and I get similar but equally worrying messages:

• Error: R3F: BoxGeometry is not part of the THREE namespace! Did you forget to extend?
• Error: R3F: PointLight is not part of the THREE namespace! Did you forget to extend?
• Error: R3F: MeshBasicMaterial is not part of the THREE namespace! Did you forget to extend?
• Error: R3F: Mesh is not part of the THREE namespace! Did you forget to extend?
  and etc, etc

What I tried so far is to remove and reinstall the packages with the exact version framer-motion-3d expect but without any success.

Maybe there's a tiny thing I haven't noticed, I tried to follow the switch example on the website as close as possible.
Any ideas that'll put me in the right place?

Thanks

"use client";

import { ContactShadows } from "@react-three/drei";
import { Suspense, useState } from "react";
import { motion, MotionCanvas } from "framer-motion-3d";

export function HomeHero() {
  const [variant, setVariant] = useState<"closed" | "open">("closed");

  return (
    <div className="h-[100dvh] relative">
      <MotionCanvas
        shadows
        dpr={[1, 2]}
        camera={{ position: [0, 0, -30], fov: 90 }}
      >
        <pointLight position={[10, 10, 10]} intensity={1.5} color={"#ff0000"} />
        <Suspense fallback={null}>
          <motion.group
            variants={{
              closed: { scale: 1 },
              open: { scale: 2 },
            }}
            rotation={[0, Math.PI, 0]}
            onClick={() => {
              setVariant(variant === "closed" ? "open" : "closed");
            }}
          >
            <mesh position={[0, 0, 0]}>
              <boxGeometry args={[10, 10, 10]} />
              <meshBasicMaterial color="#ff0000" />
            </mesh>
          </motion.group>
        </Suspense>
        <ContactShadows
          position={[0, -4.5, 0]}
          opacity={0.4}
          scale={20}
          blur={1.75}
          far={4.5}
        />
      </MotionCanvas>
    </div>
  );
}