Chrome Dev Tools Shows all useState hooks with the name 'State'

Question

I am trying to inspect a React Hooks component in Dev Tools, but regardless of component, all my useState hooks show up as:

Hooks

State: false
State: null
Effect: fn()

The false values are correct, but I can't figure out which hook is which since for some reason they won't display the hook variable name.

Here is how I set up each hook:

const [myHook, setMyHook] = useState(false);

Answer 1

See Is there any way to see names of 'fields' in React multiple state with React DevTools when using 'useState' hooks:

const [item, setItem] = useStateWithLabel(2, "item");

function useStateWithLabel(initialValue, name) {
  const [value, setValue] = useState(initialValue);
  useDebugValue(`${name}: ${value}`);
  return [value, setValue]; 
}