I have a very simple react code that doesn't work.

The value of the rotation from the console.log inside setTimeout is always { speed: 0, spinning: false } which was its initial value.

When do you actually use useState? What hook should I use for this simple code to work?

import React, { useEffect, useState } from 'react';
import './style.css';

export default function App() {
  const [rotation, setRotation] = useState({ speed: 0, spinning: false });

  const handleRotation = () => {
    if (!rotation.spinning) {
      setRotation({ speed: 0.02, spinning: true });
      setTimeout(() => {
        console.log(rotation);
        setRotation({ speed: 0, spinning: false });
      }, 3000);
    }
  };

  return (
    <div>
      <button onClick={handleRotation}>Spin</button>
    </div>
  );
}