I want to work this simple code in gatsby js(https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls).

but the ball didn't work. I think the usage of useState is wrong. but I cannot find the wrong point. could you please help me? Thank you

javascript

import * as React from "react"
import {useRef, useEffect, useState} from "react";
import { Container, CanvasBox} from "./style"


const MainView = () => {
  let canvasRef = useRef(null)
  const [x, setValx] = useState(0);
  const [y, setValy] = useState(0);

  useEffect(()=>{
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    let ballRadius = 2;
    let xtemp = canvas.width/2;
    let ytemp = canvas.height-30;
    // console.log('xtemp')
    // console.log(xtemp)
    // console.log(ytemp)
    setValx(xtemp);
    setValy(ytemp);
    let dx = 2;
    let dy = -2;

    function drawBall() {
      context.beginPath();
      context.arc(x, y, ballRadius, 0, Math.PI*2);
      context.fillStyle = "white";
      context.fill();
      context.closePath();
    }

    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();

        if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
            dy = -dy;
        }

        // console.log('x')
        let xtemp = x + dx
        let ytemp = y + dy;
        console.log('x')
        console.log(x)
        console.log('xtemp')
        console.log(xtemp)
        setValx(xtemp);
        setValy(ytemp);
    }  
    setInterval(draw, 10);
  },[x,y])


  return(
    <>
      <Container>
        <CanvasBox ref={canvasRef} ></CanvasBox>
      </Container>
    </> 
  )
}

export default MainView

css

import styled from "@emotion/styled"


export const Container = styled.div`
    background-color: black;
    margin: 0;
    width: 100vw;
    height: 100vmax;
    max-height: 100vh;
`
export const CanvasBox = styled.canvas`
    width: 100%;
    height: 100%;
    position: absolute;
`