ReactTooltip is not rendering properly

Question

Attempting to use ReactTooltips however the same tip is rendering twice rather than two different tips. The following tips renders twice;

                <ReactTooltip
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  Revolution technology is a minor investing firm where I analysed small cap crypto currencies and clinical stage biotechnology companies
                </ReactTooltip>

In the place of;

                <ReactTooltip
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  After becoming one of the youngest people in Australia to complete high school I went on to pursue my passion for the sciences, however during downtime caused by shoulder surgery I decided to drop out and pursue my interest in web3
                </ReactTooltip>

Here is the whole code for the page:

const Skills = () => (
  <>
    <h2 className="head-text">Skills & Experiences</h2>

    <div className="app__skills-container">

     ... (there is other code here however it is irrelevant to the problem)
      
      <div className="app__skills-exp">
        <div>
          <motion.div
            className="app__skills-exp-item"
          >
            <div className="app__skills-exp-year">
              <p className="bold-text">2021</p>
            </div>
            <motion.div className="app__skills-exp-works">

              <>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                >
                  <h4 className="bold-text">Web3 and Biotechnology Analyst</h4>
                  <p className="p-text">Revolution Technology</p>
                </motion.div>
                <ReactTooltip
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  Revolution technology is a minor investing firm where I analysed small cap crypto currencies and clinical stage biotechnology companies
                </ReactTooltip>
              </>

            </motion.div>
          </motion.div>
        </div>
        <div>
          <motion.div
            className="app__skills-exp-item"
          >
            <div className="app__skills-exp-year">
              <p className="bold-text">2020</p>
            </div>
            <motion.div className="app__skills-exp-works">

              <>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                >
                  <h4 className="bold-text">Bachelor of Biotechnology</h4>
                  <p className="p-text">University of Queensland</p>
                </motion.div>
                <ReactTooltip
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  After becoming one of the youngest people in Australia to complete high school I went on to pursue my passion for the sciences, however during downtime caused by shoulder surgery I decided to drop out and pursue my interest in web3
                </ReactTooltip>
              </>

            </motion.div>
          </motion.div>
        </div>
      </div>
    </div>
  </>
);

Answer 1

UPDATED ANSWER

Apart from the previous answer, react-tooltip also suggests to have ReactTooltip.rebuild() for multiple dynamic ReactTooltip. You can check the document for the detail.

useEffect(() => {
   ReactTooltip.rebuild();
});

---

OLD ANSWER

I think your problem is from component identity. React does not know which ReactTooltip you refer to in renderings.

You should use key prop to make ReactTooltip unique from each other.

<ReactTooltip
   effect="solid"
   arrowColor="#fff"
   className="skills-tooltip"
   key="react-tooltip-1"
>
Revolution technology is a minor investing firm where I analysed small cap crypto currencies and clinical stage biotechnology companies
</ReactTooltip>
...
<ReactTooltip
   effect="solid"
   arrowColor="#fff"
   className="skills-tooltip"
   key="react-tooltip-2"
>
After becoming one of the youngest people in Australia to complete high school I went on to pursue my passion for the sciences, however during downtime caused by shoulder surgery I decided to drop out and pursue my interest in web3
</ReactTooltip>