clearInterval не работает

Некорректно работает clearInterval(). Когда я навожу на элемент, значение width не должно увеличиваться, но этого не происходит. Подскажите в чем может быть проблема?

import { useState, useEffect } from "react";
import styles from "./Notification.module.scss";

const Notification = (props) => {
  const [width, setWidth] = useState(0);
  const [intervalID, setIntervalID] = useState(null);

  const handleStartTimer = () => {
    const id = setInterval(() => {
      setWidth((prev) => {
        if (prev < 100) {
          return prev + 0.5;
        }

        clearInterval(id);
        return prev;
      });
    }, 20);

    setIntervalID(id);
  };

  const handlePauseTimer = () => {
    clearInterval(intervalID);
  };

  useEffect(() => {
    handleStartTimer();
  }, []);

  return (
    <div
      onMouseEnter={handlePauseTimer}
      onMouseLeave={handleStartTimer}
      className={styles.notificationItem}>
      <p>{props.message}</p>
      <div style={{ width: `${width}%` }} className={styles.bar} />
    </div>
  );
};

export default Notification;