Animation in Canvas with React plays in an instant then vanishes - reactjs

Question

I have a 320x40 .png file that I am trying to play each animation from inside of my canvas, for a total of 10 frames. Each individual animation frame is a 32x40 section of the png file. I'll cut to the chase and show the png animation code for the character:
export default function SpriteAni(ctx, charAnim, currentFrame) {
const charSprite = new Image();
charSprite.src = `./images/char_${charAnim}.png`
const posx = 320;
const posy = 200;
const sheet_width = 32;
const sheet_height = 40;
const sprite_width = sheet_width * 1.5;
const sprite_height = sheet_height * 1.5;
ctx.drawImage(charSprite, currentFrame * sheet_width, 0, sheet_width, sheet_height, posx, posy, sprite_width * 1.5, sprite_height * 1.5);
}
Here's the relevant code for drawing this to the screen inside of my main Canvas.jsx file
import { useEffect, useRef, useState } from "react";
import SpriteAni from '../SpriteAni.jsx';
// Canvas and game logic for display
const Canvas = ({ width, height }) => {
const canvasRef = useRef(null);
const requestIdRef = useRef(null);
let frame = 0; // frames canvas is drawn to screen
const [currentFrame, setCurrentFrame] = useState(0); // used to determine current frame for current Wario animation
const [charAnim, setCharAnim] = useState('walk')
// Char animation frame counts
const walk_frames = 9;
const drawFrame = () => {
const ctx = canvasRef.current.getContext('2d');
/// clear screen each frame
ctx.clearRect(0,0,constants.CANVAS_WIDTH,constants.CANVAS_HEIGHT);
// draw graphics
handleBackground(ctx);
SpriteAni(ctx, charAnim, currentFrame);
if (currentFrame >= walk_frames) setCurrentFrame(0);
else setCurrentFrame(currentFrame + 1);
}
const tick = () => {
if (!canvasRef.current) return;
drawFrame();
frame++;
requestAnimationFrame(tick)
}
useEffect(() => {
requestIdRef.current = requestAnimationFrame(tick)
return () => {
cancelAnimationFrame(requestIdRef.current)
};
}, [])
return (
<canvas
width={width}
height={height}
style={canvasStyle}
ref={canvasRef}
/>
)
}
export default Canvas
const canvasStyle = {
border: "1px solid black",
position: "absolute",
}
What I'm especially confused about is I can delete all of the "if (currentFrame >= ${charAnim}_frames)..." code underneath SpriteAni in the drawFrame function and nothing changes. It seems to all be acting independently of any of that and just races through all 10 frames before vanishing off of the screen within one second. I don't even understand how that's possible since the only function inside of SpriteAni is a drawImage of which the only variable that should be updating each frame is currentFrame.
How is it animating anything independently like that? I'm just baffled what's going on here! Any help greatly appreciated!