Three-fiber OrbitControls and "R3F: Hooks can only be used within the Canvas component!" error

Hey!

I just discovered this library and think it looks really interesting!

I did a small experiment to see if ipyreact could replace some stuff I've made in the past using pythreejs. However I ran into a minor snag when trying to bring in an <OrbitControls/> component that I was wondering any of you might help me solve?

I should also mention that my frontend experience is limited, so I might (hopefully) be asking a dumb question and it's also likely that my question isn't really related to ipyreact itself:)

Anyways, I started by using the ESM>Playground where I created a minimal three-fiber example hoping I would be able to get this to work in my jupyterlab environment.

import React, { useRef, useState } from "react"
import { Canvas, useFrame, useThree } from 'https://esm.sh/@react-three/fiber@8.13.0'
import { OrbitControls } from "https://esm.sh/@react-three/drei@9.68.6";

function Box({position, color}) {
  const ref = useRef()
  useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01))

  return (
    <mesh position={position} ref={ref}>
      <boxBufferGeometry args={[1, 1, 1]} attach="geometry" />
      <meshPhongMaterial color={color} attach="material" />
    </mesh>
  )
}

function App() {
  return (
    <Canvas>
      <Box color="#18a36e" position={[-1, 0, 3]} />
      <Box color="#f56f42" position={[1, 0, 3]} />
      <OrbitControls/>
      <directionalLight color="#ffffff" intensity={1} position={[-1, 2, 4]} />
    </Canvas>
  )
}

export default App

Okay, the controls and everything (except I was unable to get tailwind css working) seems to work as expected.

However, when copying this into my ipyreact environment tt seems that using the <OrbitControls/> component generates the error

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

By simply removing the <OrbitControls/> element I was able to get the example working

When searching for an answer I found this but I'm not that familiar with the r3f hooks concept that I immediately understand how to fix it.

Anyone pointing me in the direction of solving this would be much appreciated!

Best Regards
Kristoffer

Start with the provided minimal TypeScript example and compare the ESM Playground imports with the ipyreact environment, focusing on Canvas, OrbitControls, and their react-three-fiber versions. Reproduce the example with OrbitControls present and absent; done means it renders without the hooks error and the controls work.