useFBX crashes react component

[nikolagigic]

I've got two components, but only one crashes when I use useFBX hook inside of it, and stack trace does not refer to anything specific that I could use to debug.

const Scene = ({ modelUrl }) => {
  const fbx = useFBX(modelUrl);

  return <primitive object={fbx} scale={0.1} />;
};

const Render3D = ({ modelUrl }) => {
  return (
    <div>
      <Canvas camera={{ position: [35, 35, 35] }}>
        <ambientLight intensity={3} />
        <pointLight position={[40, 0, 40]} />
        <Suspense fallback={null}>
          <Scene modelUrl={modelUrl} />
        </Suspense>
      </Canvas>
    </div>
  );
};

export default Render3D;

When I use it inside of Scene component everything works fine, but when I move the useFBX hook down to Render3D it crashes the app with blank white screen. Any idea what's causing this?

Stacktrace:

The above error occurred in the <Render3D> component:

    at Render3D (webpack-internal:///./pages/render3D.js:43:24)
    at div
    at RenderWrapper (webpack-internal:///./components/render-wrapper.js:13:23)
    at div
    at div
    at div
    at NFTCard (webpack-internal:///./components/nft-card.js:26:21)
    at div
    at div
    at CreatorDashboard (webpack-internal:///./pages/creator-dashboard.js:26:66)
    at div
    at MyApp (webpack-internal:///./pages/_app.js:22:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:258:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:754:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:893:25)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

[drcmda]

down to render3d means in the render3d's function body? hooks can only be inside canvas, canvas is their context. and async hooks must be within a suspense boundary.