Canvas animation react - reactjs

Question

I want to create an animated canvas in ReactJs. I have a functional component. I created a class named circle with two methods: draw and update. When I instance circle, I want to call draw, but i have this error from the browser:
TypeError: cir.draw is not a function
I tried with const draw = function() {...} but is the same.
If you know a better way to crate an animated canvas I'm opened for suggestions. In Js it is easiest for me, but React has some difficulties for do that, I think.
This is my code.
import React, { useState, useEffect } from "react";
export default function Home() {
var canvas;
var c;
var radius = 40;
var circle = function (x, y, dx, dy) {
const draw = () => {
c.beginPath();
c.arc(x, y, radius, 0, Math.PI * 2, false);
c.strokeStyle = "#ccc";
c.stroke();
};
const update = () => {
if (x + radius > window.innerWidth || x - radius < 0) dx = -dx;
if (y + radius > window.innerHeight || y - radius < 0) dy = -dy;
x += dx;
y += dy;
};
};
var Animate = () => {
requestAnimationFrame(Animate);
var x = Math.random() * window.innerWidth;
var y = Math.random() * window.innerHeight;
var dx = (Math.random() - 0.5) * 15;
var dy = (Math.random() - 0.5) * 50;
let cir = new circle(x, y, dx, dy, c);
cir.draw();
console.log(cir);
};
useEffect(() => {
var canvas = document.querySelector("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext("2d");
console.log("a");
Animate();
}, []);
return (
<div>
<canvas></canvas>
</div>
);
}