Remove the background for react-globe.gl

Question

I am having issue with removing the background of the globe.

Having tried to set the backgroundImageUrl to null and set the backgroundColor to rgba(0,0,0,0), neither of them worked as they would only make the background transparent, and did not actually remove the background itself.

I would greatly appreciate it if anyone could tell me how to remove the background.

import React from 'react'
import Globe from 'react-globe.gl'
import continents from '../../public/custom.geo.json'
import earthImg from '../../public/earth.jpeg'
import { useEffect, useRef } from 'react'


function About() {
  const globeEl = useRef()

  useEffect(() => {
    // Auto-rotate
    globeEl.current.controls().autoRotate = true;
    globeEl.current.controls().autoRotateSpeed = 1;
    globeEl.current.controls().enableZoom = false;
    globeEl.current.pointOfView({
      lat: 23.5,
      lng: 0,
      altitude: 2.5,
    })
  }, [])

  return (
    <div id='about'>
      <div className="hero">
        <div className="hero--text">
          <h1>From Concept to Creation</h1>
          <h4>Bridging the Gap Between Imagination and Reality</h4>
          <div className="hero--description">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br></br>Voluptates reprehenderit totam delectus neque error ex numquam, sint dolorum! Aperiam, ipsum?
          </div>
        </div>

        <div className="hero--globe">
          <Globe
            ref={globeEl}
            globeImageUrl={earthImg}
            // backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
            backgroundColor='rgba(0,0,0,0)'
            width={1150}
            height={1150}
            hexPolygonsData={continents.features}
            hexPolygonMargin={0.7}
            hexPolygonColor={() => 'rgba(255, 255, 255, 1)'}

          />

        </div>
      </div>
    </div>
  )
}

export default About