The computer has come to shape our world and the universe. It is so important that we cannot do without this fantastic invention. You would have heard about networking before. Networking is all about connection, the concept of networking can be applied to every facet of human life. It refers to a computer as well.

Phaser 3 - Duplicate Canvas component is created when creating a new instance of Phaser 3 GameObject in React

Anil

I'm using Create React App as framework and trying to render the GameObject new Phaser.Game(gameConfig) as React component. I am able to render but it creates a duplicate Canvas object as shown below:

Here is my Game Component:

import Phaser from "phaser";
import React from "react";

export default class Game extends React.Component {
    componentDidMount() {
        const gameConfig: Phaser.Types.Core.GameConfig = {
            type: Phaser.AUTO,
            parent: 'game-container',
            backgroundColor: '#EBEBEB',
            width: 600,
            height: 800
        }

        new Phaser.Game(gameConfig);
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return <div id='game-container' />   
    }
}

And here is where I'm rendering:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Game from './game';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>
);

reportWebVitals();

How do I remove this duplicate?