I'm trying to change the isActive state (using hooks) every time the space key is pressed. However, it only changes the state the first time space is pressed, and subsequent space presses do nothing. What am I doing wrong?

function App() {
  const [isActive, setIsActive] = useState(false);

    const spaceDown = React.useCallback((event) => {
      if(event.keyCode === 32) {
        setIsActive(!isActive);
      }
    }, []);
  
    useEffect(() => {
      document.addEventListener("keydown", spaceDown, false);
      return () => {
        document.removeEventListener("keydown", spaceDown, false);
      };
    }, []);
  
    return (   
      <div>{isActive.toString()}</div>
    )
}