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 setup each hook:

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

Answer 1

see https://stackoverflow.com/a/58579953/1930509

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

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