React js - Text Sphere not rendering after reload

Question

Currently working in a react.js environment and wanted add this cool animated text sphere. I was using a package called TagCloud to help get everything rendered (here is the link to the npm package https://www.npmjs.com/package/TagCloud?activeTab=readme), but once I got everything imported and set up the text sphere will only appear once and when you reload the webpage it will disappear.

I have tried looking up videos such as this one - https://www.youtube.com/watch?v=5jlDHSqjZcc - to help out but still ended up with the same results of the sphere disappearing after you reload the webpage. Also, not sure if its worth adding but when I edit my TextSphere component while the react app is open a whole other unwanted copy of the text sphere is generated and displayed on the webpage. I will be attaching my code below for reference. Thank you in advance for any help.

react js component:

import React, { useEffect }from "react";
import TagCloud from "TagCloud";

const TextSphere = () => {
    useEffect(() => {
        return () => {
            const container = ".tagcloud";
            const texts = [
                 'JavaScript', 
                 'CSS', 
                 'HTML',
                 'C', 
                 'C++', 
                 'React',
                 'Python', 
                 'Java',
                 'MySQL',
                 'jQuery',
            ];

            const options = {
                radius: 300,
                maxSpeed: "normal",
                initSpeed: "normal",
                keep: true,
            };

            TagCloud(container, texts, options);
        };
    }, []);

    return (
        <div className="text-sphere">
            <span className="tagcloud"></span>
        </div>
    );
};

export default TextSphere;

css file -

.text-sphere {
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tagcloud {
    display: inline-block;
    top: 0;
    left: 0;
    font-weight: 600;
    letter-spacing: 0.0625em;
    font-size: 1.3em;
}

.tagcloud--item {
    color: black;
    text-transform: uppercase;
}

.tagcloud--item:hover {
    color: rgb(224, 167, 101);
}

Answer 1

import React, { useEffect, useRef } from "react";
import TagCloud from "TagCloud";
import "./TextSphere.css";

const TextSphere = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const texts = [
      "HTML",
      "CSS",
      "JavaScript",
      "NodeJs",
      "React",
      "MongoDb",
      "MySql",
      "Git",
      "MUI",
      "Express",
      "GitHub",
      "AI",
    ];
    const options = {
      radius: 300,
      maxSpeed: "normal",
      initSpeed: "normal",
      keep: true,
      loop: true,
      lockX: true,
      lockY: true,
    };

    TagCloud(container, texts, options);

    return () => {
      TagCloud(container, [], {});
    };
  }, []);

  return (
    <div className="text-sphere">
      <span className="tagcloud" ref={containerRef}></span>
    </div>
  );
};

export default TextSphere;