Bar Icon onTouchEnd problem with animation on mobile device

I created a bar that looks like macOS bar, but when I’m using my phone, I clicked and the animation look like this, like it hasn’t done its hover animation:

It should look like this when I click (this is on the computer screen with mouse)

I tried to figure out how, and I looked at the onTouch event, but it didn’t fix me; it also affects my tooltip, which can’t be closed when I’m using a mobile device.

This is my snip code BarIcon.js:

const BarIcon = ({ icon, name, url, clickHandler, changeColor, theme }) => {
  const [bounce, setBounce] = useState(false);
  const [hover, setHover] = useState(false);

  const changeHandler = () => {
    setBounce(true);
    setTimeout(() => {
      setBounce(false);
    }, 500);
  };

  const location = useRouter();
  const path = location.pathname;
  const displayNav = path === url;

  const handleClick = () => {
    setHover(false);
    setTimeout(() => {
      changeHandler();
      if (clickHandler) {
        clickHandler();
      }
    }, 50);
  };

  return (
    <div className="Icon--container" alt={name} style={{ position: "relative" }}>
      <div className={bounce ? "Icon--bounce icon2" : "icon2"}>
        <Tag
          pos="fixed"
          top={{ xs: "-37px", md: "-40px" }}
          w="auto"
          d={hover ? "block" : "none"}
          bg={changeColor ? "#fefefe" : "#161616"}
          border="0.5px solid"
          borderColor={changeColor ? "#dbdbdb" : "#3e3e3e"}
          textColor={changeColor ? "#858585" : "#7e7e7e"}
          transition="0.3s"
          zIndex="9999"
        >
          {name}
        </Tag>
        <span
          id="icon"
          className={"Icon Icon" + theme}
          onClick={handleClick}
          onTouchEnd={handleClick} // Đảm bảo xử lý nhấp chuột trên thiết bị di động
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          <Icon
            name={bounce ? "Loading" : icon}
            color={changeColor ? "#858585" : "#7e7e7e"}
            size="22px"
          />
        </span>
      </div>
      <Icon
        d={displayNav ? null : "none"}
        name="Dot"
        m="auto"
        color={changeColor ? "#dbdbdb" : "#3e3e3e"}
        size="10px"
      />
    </div>
  );
};

And this is my CSS for handling the hover event of the button:

.Icon:hover{
    transform: scale(1.4) translateY(-15px) ;
    margin: 20px 15px 0px 15px;
}
.Icon:not(:hover){
    transform: scale(1) ;
}