How to get javascript element to show up in typescript class with react-helmet

Question

In the javascript file I am trying to place what is currently just a square into the canvas with the ID 'game'. The canvas is located in the Typescript file not the html file. The goal is to eventually turn this into a side-scroller game on the website made with Typescript React. I am getting the error: Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. I am wondering if I am incorrectly using react-helmet, or if it is not finding the canvas with document.getElementById();

This is the main.js:

const canvas = document.getElementByID('game');
const ctx = canvas.getContext('2d');

//Variables
let score;
let highscore;
let player;


class Player {
    constructor(x, y, w, h, c) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.c = c;

      
    }

    Draw() {
        ctx.beginPath();
        ctx.fillStyle = this.c;
        ctx.fillRect(this.x, this.y, this.w, this.h);
        ctx.closePath();
    }
}

function Start() {

    gameSpeed = 3;
    gravity = 1;

    score = 0;

    player = new Player(25, canvas.height -40, 50, 50, '#ff5858');
    player.Draw();
    
}

This is the typescript element:

import React from "react"

import { Helmet } from "react-helmet";
import "./App.css";





class ScreenContent extends React.Component {
    state = {
      screenName: 'screen1',
    }

   screen1ButtonClick(){
        this.setState({
            screenName: 'screen1'
        });
    }
    screen2ButtonClick() {
        this.setState({
            screenName: 'screen2'
        });
    }

    screen3ButtonClick() {
        this.setState({
            screenName: 'screen3'
        });
    }


    screen4ButtonClick() {
        this.setState({
            screenName: 'screen4'
        });
    }

   screenSelection() {
    switch (this.state.screenName) {
        case 'screen1':

            return <div className="screen1">  <p className= "title">  </p> <p className="subTitle">  </p> <div className = "buttons"> <button className="button" onClick={() => this.screen2ButtonClick()}>Mint</button>  <button className="button" onClick={() => this.screen3ButtonClick()}> Play </button> <button className="button" onClick={() => this.screen4ButtonClick()}>screen4</button> </div> </div>;
        case 'screen2':
            return <div className="screen2">
                <button className="backButton" onClick={() => this.screen1ButtonClick()}> Back </button>
                     </div>
        case 'screen3':
            return <div className="screen3">

                <button className="backButton" onClick={() => this.screen1ButtonClick()}> Back </button>
                <canvas id="game" style={{ width: "200px", height: "200px", background: "white", margin: "100px"}}> </canvas>
                <Helmet>
                    <script src="main.js"></script>
                    
                </Helmet>
                    </div>
        case 'screen4':
            return <div className="screen4">I am screen4 <button className="backButton" onClick={() => this.screen1ButtonClick()}> Back </button> </div>;
        default:
            return <div> this is the home screen <button className="button" onClick={() => this.screen2ButtonClick()}>screen2</button>  <button className="button" onClick={() => this.screen3ButtonClick()}>screen3</button> <button className="button" onClick={() => this.screen4ButtonClick()}>screen4</button></div>;
    }
    };
            


    render() {
        return (
            <div className="screenSelect"> {
                
                this.screenSelection()
            }
            </div>

        );
    }
}

export default ScreenContent;