react useref未定义

我想我可能误用了 useRef 在这里。当我试图绘制到画布时,出现以下错误: cannot set 'fillStyle' of undefined 是的。

import React,{useEffect, useRef} from "react"
import useWindowSize from "../hooks/useWindowSize"

    export default function Player(){
        const canvasRef = useRef()
        const ctx = useRef()

        useEffect(()=>{
            ctx.current = canvasRef.current.getContext('2d')
        },[])
        ctx.current.fillStyle= "green"
        ctx.current.fillRect(20,20,150,100)
        return(
            <React.Fragment>
        <div>Hello</div>
        <canvas ref={canvasRef} width="500" height="500" />
        </React.Fragment>
    )}