Using <Controls.Canvas> is returning error

[Theonlyhamstertoh]

After installing with yarn add react-three-gui, I attempted to add it to my scene like this:

import { Controls, useControls } from "react-three-gui";

function App() {
  return (
    <Controls.Provider>
      <Controls.Canvas ></Controls.Canvas>
      <Controls />
    </Controls.Provider>
  );
}

When I write Controls.Canvas, it returns:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Context.Consumer`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
   ...

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Where am I getting this wrong?

[Buraisx]

I've been getting the same error as well. i'm currently working around it by using the withControls example with my own canvas

import { withControls } from 'react-three-gui';

// Wrap the <Canvas> with `withControls`
const YourCanvas = withControls(Canvas);

const Scene = () => (
  <YourCanvas>
    <mesh rotation-x={rotationX} />
  </YourCanvas>
);

[Theonlyhamstertoh]

I switched to using Leva. If you haven't check it out, it has a great GUI made specifically for react @Buraisx