React не видит clearRect : TypeError: Cannot read properties of null (reading 'clearRect')

Пишу игру на React + Canvas. Нужно чтобы шары летели снизу вверх. Но функции отрисовки(requestAnimationFrame и move) почему-то работают только внутри useEffect, который нужен только для определения контекста Канвас, то есть работают только 1 раз:

const App = () => {
    const canvasRef = useRef(null)
    const ctxRef = useRef(null)
    const windowWidth = 1300
    const windowHeight = 700
    let x = Math.random() * windowWidth;
    let y = windowHeight-30
    let moveY = 0
    const [balls, setBalls] = useState(moveY)
    
    useEffect(() => {
        const canvas = canvasRef.current
        canvas.width = windowWidth
        canvas.height = windowHeight
        const ctx = canvas.getContext('2d')
        ctxRef.current = ctx
        
        requestAnimationFrame(move)
        
        function move(){
            moveY += 3
            requestAnimationFrame(move)
            ctxRef.current.clearRect(0,0,windowWidth,windowHeight)
            ctxRef.current.beginPath()
            ctxRef.current.arc(x, y-moveY, 50, 0, Math.PI * 2)
            ctxRef.current.fillStyle = 'red'
            ctxRef.current.fill()
            ctxRef.current.closePath()
        }

      }, [])

А если вынести requestAnimationFrame и функцию move() из UseEffect, тогда появляется ошибка TypeError: Cannot read properties of null (reading 'clearRect'). Что я делаю не так?