Can't see updated variables on requestAnimationFrame - class

Question

I've been trying to update a class property. And I am trying to change the font of the canvas based on that variable in RequestAnimationFrame but I can't seem to update the variable. When I console.log the IsChecked variable it always evaluates to false even though I set it to true when the condition is met.So I wanted to ask if my implementation was wrong or what the problem is ?
This is the main class;
type TCanvas = {
canvasWidth: number;
canvasHeight: number;
context: CanvasRenderingContext2D | null;
};
export class Canvas {
canvasWidth!: number;
canvasHeight!: number;
context!: CanvasRenderingContext2D | null;
fontSize: number;
columns: number;
symbols: any[];
lastTime: number;
requiredPassedTime: number;
fps: number;
time: number;
animated: number;
isChecked: boolean;
constructor({ canvasWidth, canvasHeight, context }: TCanvas) {
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.context = context;
this.fontSize = 0.8;
this.columns = canvasWidth / this.fontSize;
this.symbols = [];
this.#init();
this.animate();
this.lastTime = 0;
this.fps = 40;
this.requiredPassedTime = 1000 / this.fps;
this.time = 0;
this.animated = 0;
this.context.font = this.fontSize + "px monospace";
this.isChecked = false;
}
getY() {
this.isChecked = true;
}
#init() {
[...Array(Math.floor(this.columns)).fill(0)].map(
(_, i) =>
(this.symbols[i] = new Symbol({
x: i,
y: 0,
fontSize: this.fontSize,
context: this.context,
getY: this.getY,
}))
);
}
animate = () => {
this.symbols.forEach((symbol) => symbol.drawCircle());
//When it's updated the font should be changed here. But is checked is evaluates to false all the time.
if (this.isChecked) {
this.context.font = "35px monospace";
}
requestAnimationFrame(this.animate);
};
}
And this one is the one that when the condition is met the passed function updates the other class' property
import { text } from "./text";
interface CanvasProps {
context: CanvasRenderingContext2D;
fontSize: number;
y: any;
x: any;
getY: any;
}
export class Symbol {
context: CanvasRenderingContext2D;
fontSize: number;
getY: any;
x: any;
y: any;
texts: any;
canDrawCircle: any;
constructor({ x, y, fontSize, context, getY }: CanvasProps) {
this.context = context;
this.fontSize = fontSize;
this.x = x;
this.y = y;
this.texts = text;
this.getY = getY;
this.canDrawCircle = true;
}
drawCircle() {
const text = this.texts.charAt(
Math.floor(Math.random() * this.texts.length)
);
this.context.fillStyle = "white";
this.context.fillText(
text,
this.x * Math.random() * 10 * this.fontSize,
this.y * this.fontSize
);
if (this.y * this.fontSize > window.innerHeight && Math.random() > 0.2) {
// here the isChecked variable should be updated.
this.getY();
this.y = 0;
} else {
this.y += Math.random() * 10;
}
}
}