Naker.back with React

Question

Naker.Back Documentations

I came across an article that uses Naker.back to make interactive backgrounds so I decided to give it a try in my portfolio website that I plan on using MERN stack to build. I was planning to use my interactive background created and embed it into my React component.

This is the file structure for my home page now

This is the code for Background.js that I copied and edited the value based on the documentation provided and will be exported into Home.js as JSX

import React, { Component } from 'react';
import styles from './Background.module.css'

const script = document.createElement("script");
script.src = "https://d23jutsnau9x47.cloudfront.net/back/v1.0.9/viewer.js";
script.async = true;
document.body.appendChild(script);

class Background extends Component {

componentDidMount() {
    window.nakerback.render({
        container: document.getElementById('container'),
        particle: {
            direction1: {x: 0,y: 0,z: 0},
            direction2: {x: 0,y: -100,z: -100},
            life: 5,
            power: 0.02,
            texture: "https://res.cloudinary.com/naker-io/image/upload/v1566560053/flare_01.png",
            number: 2000,
            colorStart: [251,251,251,0],
            colorEnd: [4,72,132,0.52],
            sizeStart: 1.15,
            sizeEnd: 2.3
        },
        environment: {
            gradient: 'horizontol',
            sensitivity: 0.8,
            backgroundTop: [40,4,107,1],
            backgroundBottom: [1,18,51,1]
        }
    });
}
    render(){ 
    return <div className={styles.background} id="container"></div>
    };
}

export default Background;

Home.js code that will be exported into App.js as component for the route:

import React from 'react';
import Background from '../components/Background'

const Home = () => {
    return(
        <div>
            <Background/>
            <h1>Home</h1>
        </div>
        )
};

export default Home;

Error Message was thrown back:

TypeError: Cannot read property 'render' of undefined

   9 | class Background extends Component {
  10 | 
  11 |     componentDidMount() {
> 12 |         window.nakerback.render({
  13 |             container: document.getElementById('container'),
  14 |             particle: {
  15 |                 direction1: {x: 0,y: 0,z: 0},