Trouble rendering images in Phaser 3 as a React component

[Direk]

Hi there fellow coders!
I'm in the making of a new game and I've run into some issues while trying to implement Phaser 3 as a React component.

When I run the following code I get a trouble rendering images. Instead, I get black squares.

This is my first experience of using in Phaser 3 as a React component. What am I doing wrong?

This is how I create a React component:

import React from 'react';

import Boot from '../components/app/scripts/index'

 

const StartPage= props => {

  return 

   <div>

      <h1>StartPage</h1>

      <Boot />

    </div> ;

};

 

export default StartPage;

run the Phaser 3

import React from 'react';

import Phaser from "phaser";.

 

import * as config from './config';

 

//  Boot the game.

const Boot = probs =>  {

  new Phaser.Game(config);

 

  return (<div id="phaser"></div>)

}

 

export default  Boot;

preload and create

import Phaser from "phaser";

import Title from '../../static/assets/title.png';

 

export default class Loader extends Phaser.Scene {

 

  constructor() {

    super({key: 'Loader'});

  }

 

  preload() {

    this.load.image(['title', Title]);

  }

 

  create(/* data */) {

      this.add.image(x, y - 80, 'title');

  }

}