I'm new to React, I want to make a component for my phaser game to insert it into a react project.

My Game component:

import React, { Component } from 'react'
import Phaser from 'phaser'

class Game extends Component {

  constructor() {
    super();

    this.config = {
        type: Phaser.AUTO,
        width: 700,
        height: 600,
        parent: "game",
        pixelArt: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: function(){
              this.load.image('tiles', process.env.PUBLIC_URL + '/assets/TILES.png');
              this.load.tilemapTiledJSON("map", process.env.PUBLIC_URL + "/assets/MAP.json");
            },
            create: function(){
              const map = this.make.tilemap({ key: "map" });
              const tileset = map.addTilesetImage("TILES", "tiles");

              const worldLayer = map.createLayer("World", tileset, 0, 0);
            },
            update: function(){

            }
        }
    };

    this.game = new Phaser.Game(this.config);


  }

  render() {
    return (<div id="game"></div>)
  }
}

export default Game;

index.js:

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

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

As you can see from this image, the image is reapeated 4 times, why? How can I fix this? I have tried setting fixed size to the div but it didnt work.