Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[MartensCedric]

I might be doing something wrong but I cannot get this library to work

The code used:

export default class App extends Component {    
      
     handleCanvas = (canvas) => {    
     const ctx = canvas.getContext('2d');    
     ctx.fillStyle = 'purple';    
     ctx.fillRect(0, 0, 100, 100);    
    }    
      
   render() {    
     return (    
       <Canvas ref={this.handleCanvas}/>    
     )    
    }    
  }    

I'm getting this error:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

This is the tutorial so I'm a bit confused on why I am getting this problem

[mobreviews]

if you want to render a functional component it should look more like this

export default function Rectangle() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      const ctx = ref.current.getContext('2d');

      if (ctx) {
        ctx.fillStyle = 'purple';    
       ctx.fillRect(0, 0, 100, 100);
      }
    }
  }, [ref]);

  return (
    <Canvas
      ref={ref}
      style={{width: '100%', height: '100%', backgroundColor: 'black'}}
    />
  );
}