SetState(state+1) returns double the amount plus one in react

Question

I am trying to use a React function component to have a number increment + 1 on keydown but instead of increasing by one (i.e. 1,2,3,4,5) it returns it doubles the number and then increases by on (i.e. 1,3,7,15,31). How Do I get this to react correctly?

   const Display = (props) => {
      return( 
        <div id="display">{props.text}</div>
      )
    }

const App = () => {
  [displayText, setDisplayText] = React.useState(0);

  window.addEventListener('keydown',(e)=>{
     setDisplayText(displayText + 1)
  })
   
  return (

   <div class="container">
     <Display text={displayText} /> 
   </div>

  )
}

Answer 1

It has already been answered here: Increase and decrease the number using addEventListener keydown in React

CODE

export default function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const keyDownCallback = function (e) {
      switch (e.keyCode) {
        case 38:
          setCount((count) => count + 1);
          break;
        case 40:
          setCount((count) => count - 1);
          break;
      }
    };

    document.addEventListener("keydown", keyDownCallback);

    return () => document.removeEventListener("keydown", keyDownCallback);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}