How to properly update interval from outside of the useEffect that it’s wrapped in?

I’m trying to use a state number to maintain the time of each interval but when I update the state value the interval remains the same. Here’s my codesandbox:

import React, { useEffect, useState } from "react";

export default function App() {
  const [slideIndex, setSlideIndex] = useState<number>(1);
  const [intervalTime, setIntervalTime] = useState<number>(3000); // every 3 seconds

  useEffect(() => {
    const interval = setInterval(() => {
      setSlideIndex((slideIndex) => slideIndex + 1);
      console.log("but interval time is still: " + intervalTime);
    }, intervalTime); //  remains 3 seconds after clicking button
    return () => clearInterval(interval);
  }, []);

  const handleButtonClick = () => {
    setIntervalTime(1000);
    console.log("Interval time should be: " + intervalTime);
  };

  return (
    <div className="App">
      <h2>Counter: {slideIndex}</h2>
      <button onClick={() => handleButtonClick()}>
        shorten interval to 1 second
      </button>
    </div>
  );
}