Canvas text not able to draw properly

Question

I am basically trying to create a matrix rain effect in the background of my blog that I am working on, but I cant seem to get it to work. I do draw a red rectangle to make sure that the code reaches inside of generateChar function, which it does, as you can see from the picture but when I try to write something, I get a complete blank and I dont understand why. Initially I thought the problem was that the character generated was the issue, or the coordinate system was the problem, but i did console log and everything seems to be fine I do see a faint inkling of something being drawn on top of the red rectangle when I leave the red rectangle in its place, but the color of the text that I am drawing is yellow. What am i doing wrong? I have been stuck on this problem for a few days now and I cant seem to get anywhere with this.

import './MatrixRain.css';
import React, {useEffect, useContext, useRef, useState, useCallback} from 'react';
import RainStream from './RainStream.js';
import {Context} from '../../store/Store.js';


const MatrixRain = ( props ) => {
    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const fontSize = 15

        const matrixCharTracker = {
            prevChar: "",
            currChar: "",
            currXCoordinate: 0,
            currYCoordinate: 0,
            fontSize: fontSize,
            alphabet: `abcdefghijklmnopqrstuvwxyz0123456789$+-*/=%"'#&_(),.;:?!\\|{}<>[]^~`,
    

            generateChar: function() {

                // drawing the rectangle below works
                // ---------------------------
                // context.fillStyle = "#FF0000";
                // context.fillRect(1, 1, 300, 300);


                // drawing text below does not work
                // ---------------------------
                context.font = '50px serif';

                this.currChar = this.alphabet.charAt(Math.floor(Math.random() * this.alphabet.length));
                context.fillstyle = '#F9FF33';
                console.log('char generated is => ', this.currChar);
                console.log('this.currXCoord is => ', this.currXCoordinate);
                console.log('this.currYCoord is => ', this.currYCoordinate);
                context.fillText(this.currChar, this.currXCoordinate, this.currYCoordinate);
                // --------------
    
            }
        };

        const columns = canvas.width/matrixCharTracker.fontSize;
        
        const matrixRain = [];
        
        for( let x = 0; x < columns; x++ ) {

            const matrixRainCol = Object.create(matrixCharTracker);
            matrixRainCol.currXCoordinate = x+fontSize;

            matrixRain[x] = matrixRainCol;
        }
        
        const draw = () => {
            // draw really light black over entire canvas
            context.fillStyle = 'rgba(0, 0, 0, 0.05)';
            context.fillRect(0, 0, canvas.width, canvas.height);
        
            for(let i = 0; i < matrixRain.length; i++)
            {
                // generate char
                matrixRain[i].generateChar()

                // if column reaches end of screen, reset it
                if(matrixRain[i].currYCoordinate > canvas.height && Math.random() > 0.975){
                    matrixRain[i].currYCoordinate = 0;
                }
            
                // increment y coordinates to make rain go down
                matrixRain[i].currYCoordinate++
            }
        };

        //value of 50 looks good
        setInterval(draw, 800);
    }, [])

    return (
        <canvas className='matrix-rain' ref={canvasRef}>
            {props.children}
        </canvas>
    )
};

export default MatrixRain