Example throws "R3F: Hooks can only be used within the Canvas component!"

[jelling]

Using the example code inside of a Next 14.1 app throws "R3F: Hooks can only be used within the Canvas component!"

My code:

export const MyCanvas = () => {
  return (
    <Canvas
      style={{
        height: '90vh',
        backgroundColor: 'gray',
      }}
    >
      <ambientLight intensity={1} />
      <Stage />
      <CameraWide />
      <EffectComposer>
        <Vignette eskil={false} offset={0.1} darkness={1.1} />
      </EffectComposer>
    </Canvas>
  );
};

I also tried a) hoisting the Canvas and wrapping the canvas contents that component and b)putting use client at the top of the page. But I got the same error no matter what.

Not certain if it's related, but in VSCode I'm getting this error:

'EffectComposer' cannot be used as a JSX component.
  Its type 'MemoExoticComponent<ForwardRefExoticComponent<EffectComposerProps & RefAttributes<unknown>>>' is not a valid JSX element type.
    Type 'MemoExoticComponent<ForwardRefExoticComponent<EffectComposerProps & RefAttributes<unknown>>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'import("/Users/jelling/dev/rbt/rbt-nx/node_modules/.pnpm/@types+react@18.2.33/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
index.d.ts(378, 9): 'children' is declared here.
(alias) const EffectComposer: MemoExoticComponent<ForwardRefExoticComponent<EffectComposerProps & RefAttributes<unknown>>>
import EffectComposer

Any ideas? There are a few older closed issues related to Next.js so not surprised if that's the issue somehow.

[CodyJasonBennett]

Your React installation is duplicated, including types, which breaks features like context. Try a clean install or bring this upstream if something regressed with Next and their internal copy of React (yes, they do this and it creates tons of headache here).