What an excellent nuance of hooks you've discovered. When you call selectItem in the timeout, the value of selectedItem that is captured in lexical scope is the last value (not null).

There's two answers, a simple answer and a better working answer.

The simple answer is you can accomplish it be simply separating the functions: https://codesandbox.io/s/spinning-wheel-game-forked-cecpi

It looks like this:

  const doSelect = () => {
    setSelectedItem(Math.floor(Math.random() * items.length));
  };

  const selectItem = () => {
    if (selectedItem === null) {
      doSelect();
    } else {
      setSelectedItem(null);
      setTimeout(doSelect, 500);
    }
  };

Now, read on if you dare.

The complicated answer fixes the solution for the problem if items.length may change in between the time a timer is set up and it is fired:

https://codesandbox.io/s/spinning-wheel-game-forked-wmeku

Rerendering (i.e. setting state) in a timeout causes complexity - if the component re-rendered in between the timeout, then your callback could've captured "stale" props/state. So there's a lot going on here. I'll try and describe it as best I can:

  const [selectedItem, setSelectedItem] = useState(null);

  // we're going to use a ref to store our timer
  const timer = useRef();

  const { items } = props;

  // this is just the callback that performs a random select
  // you can see it is dependent on items.length from props
  const doSelect = useCallback(() => {
    setSelectedItem(Math.floor(Math.random() * items.length));
  }, [items.length]);


  // this is the callback to setup a timeout that we do
  // after the user has clicked a "second" time.
  // it is dependent on doSelect
  const doTimeout = useCallback(() => {
    timer.current = setTimeout(() => {
      doSelect();
      timer.current = null;
    }, 500);
  }, [doSelect]);

  // Here's the tricky thing: if items.length changes in between 
  // the time we rerender and our timer fires, then the timer callback will have 
  // captured a stale value for items.length.
  // The way we fix this is by using this effect.
  // If items.length changes and there is a timer in progress we need to:
  // 1. clear it
  // 2. run it again
  //
  // In a perfect world we'd be capturing the amount of time remaining in the 
  // timer and fire it exactly (which requires another ref)
  // feel free to try and implement that!
  useEffect(() => {
    if (!timer.current) return;
    clearTimeout(timer.current);
    doTimeout();
    // it's safe to ignore this warning because
    // we know exactly what the dependencies are here
  }, [items.length, doTimeout]);

  const selectItem = () => {
    if (selectedItem === null) {
      doSelect();
    } else {
      setSelectedItem(null);
      doTimeout();
    }
  };