OrbitControls error

[a-line-melb]

I am running into an error when I import OrbitControls into my app. I have a Canvas component that export a Canvas, which contains a mesh. The last item before I close the canvas is my OrbitControls. Here is the full file:

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei'
import Column from './Column';


const ThreeScene = () => {

  return (
    <div style={{height: "800px"}}>
      <Canvas>
        <mesh>
          <Column x={1} y={1} z={1} />
        </mesh>
        <OrbitControls /> 
      </Canvas>
    </div>
    
  )
}

export default ThreeScene

When OrbitControls is not added, the canvas is working fine. When included, I am running into numerous errors in the console:

Uncaught Error: R3F: Hooks can only be used within the Canvas component!
at useStore (index-db8af450.esm.js:1615:21)

This error repeats a few times. Any idea how this can be resolved?