Unexpected behaviors in React JS

I installed the library using this command npm install TagCloud --save-dev and because of a types error I imported it like this const TagCloud = require('TagCloud');. After running the react app multiple spheres appear.

And another problem is when I change the javascript it doesn’t affect the sphere, also on every alternate reload it doesn’t load

import React from 'react';
import './about.scss';

function About() {
  const TagCloud = require('TagCloud');

  const myTags = [
    'JavaScript',
    'CSS',
    'HTML',
    'Vscode',
    'XD',
    'React',
    'Python',
    'Linux',
    'git',
    'Flutter',
    'Dart',
    'Firebase',
    'SASS',
    'JSON',
    'Figma',
  ];

  TagCloud('.content', myTags, {
    radius: 250,
    maxSpeed: 'fast',
    initSpeed: 'fast',
    direction: 135,
    keep: true,
  });

  return (
    <div className="About" id="About">
      <div className="left">
        <div className="heading">
          <h1>ABOUT</h1>
        </div>
        <div className="para">
          <p>
            I am a high school student located in India, I am passionate about
            UI designing, android development, web development and automation.
          </p>
          <br></br>
          <p>
            Love automating daily boring tasks using python, Linux OS, gaming
            and in sports: football and badminton.
          </p>
          <br></br>
          <p>
            <a href="#Contact">Contact me</a>
          </p>
        </div>
      </div>
      <div className="right">
        <span className="content"></span>
      </div>
    </div>
  );
}

export default About;

[JorgeNava]

Great, thanks. Should we close de Issue? I think it’s more an issue with React rather than with the library

[Rohith-JN]

Oh for me this worked:

const IsTagCloudLoaded = useRef(false)

    useEffect(() => {
        if (IsTagCloudLoaded.current) return

        TagCloud('.content', Tags, {
            radius: 250,
            maxSpeed: 'fast',
            initSpeed: 'fast',
            direction: 135,
            keep: true,
        })

        IsTagCloudLoaded.current = true
    }, [])