Estoy tratando de crear el efecto de lluvia de matriz como mi fondo en reaccionar. Creé una función de lluvia de lluvia de matriz que uso para envolver todos mis otros componentes. Pero aparece un error que dice 'Error de tipo: canvas.getContext no es una función'. Estoy tratando de seguir la plantilla mencionada en este sitio https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258 ¿Qué estoy haciendo mal aquí? ¿Por qué no funciona?

Archivo MatrixRain.js

 import './MatrixRain.css'; import React, {useEffect, useContext, useRef, useState, useCallback} from 'react'; const MatrixRain = ( props ) => { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current; const context = canvas.getContext('2d'); //this line is giving me an error }, []) return ( <div className='matrix-rain' ref={canvasRef}> {props.children} </div> ) }; export default MatrixRain

archivo app.js

 import React, { useState, useReducer, createContext, useContext } from 'react'; import PostList from './components/PostList/PostList.js'; import Title from './containers/Title/Title.js'; import Pagination from './components/Pagination/Pagination.js'; import Navbar from './containers/Navbar/Navbar.js'; import Button from './components/Button/Button.js'; import Store from './store/Store.js'; import MatrixRain from './containers/MatrixRain/MatrixRain' import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from 'react-router-dom'; const App = () => { return ( <div> <Store> <MatrixRain> <Button /> <Title /> <Navbar /> <PostList /> <Pagination /> </MatrixRain> </Store> </div> ); } export default App;