当元素（span）处于悬停状态时，我想在React中应用悬停效果，但是当我对多个元素执行此操作并悬停其中一个元素时，所有元素都会被触发。 我想做多个这样的跨度元素，但是当我悬停一个时，所有的元素都在改变。

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Animated } from "react-animated-css";

// styles
import styles from "./Intro.module.css";

function Intro() {
  const [hovered, setHovered] = useState(false);
  const toggleHover = () => setHovered(!hovered);
  const toggleHover2 = () =>
    setTimeout(() => {
      setHovered(!hovered);
    }, 700);

  return (
    <section className={styles.container}>
      <div className={styles.inner}>
        <span className={styles.hello}>hello,</span>
        <h1 className={styles.title}>
          My name is

          <!-- This bit -->

          <span
            className={hovered ? "animated rubberBand" : ""}
            onMouseEnter={toggleHover}
            onMouseLeave={toggleHover2}
          >
            D
          </span>

        <!-- This bit -->
          mytro Bula
        </h1>
        <h1 className={styles.title}>
          I turn <span className={styles.titleCoffee}>coffee</span> into code
        </h1>
        <p className={styles.para}>
          I'm a <span className={styles.paraRed}>front-end web developer</span>
          <span className={styles.paraBlue}>/designer</span> from Ukraine based
          in London, I love creating beatiful and functional{" "}
          <span className={styles.paraRed}>websites</span>,{" "}
          <span className={styles.paraRed}>applications</span>, and everything
          in between.
        </p>
        <Link to="/Contact" className={styles.btn}>
          Get in touch
        </Link>
      </div>
    </section>
  );
}

export default Intro;