I want to create a custom hook to store some value in the localStorage and have an access to this value from any component in my React App. Also I want to make React App automatically re-render the component which is using the value from localStorage and show a new value.

So, I created a custom hook:

  export function useLocalStorageState(key, defaultState) {
  const [state, setState] = useState(() => {
    const storedState = localStorage.getItem(key);
    if (storedState) {
      return JSON.parse(storedState);
    }
    return defaultState;
  });

  const setLocalStorageState = useCallback(
    (newState) => {
      const changed = state !== newState;
      if (!changed) {
        return;
      }
      setState(newState);
      if (newState === null) {
        localStorage.removeItem(key);
      } else {
        localStorage.setItem(key, JSON.stringify(newState));
      }
    },
    [state, key]
  );

  return [state, setLocalStorageState];
}

I have React component Header, where I have a dropdown select with some values:

const Header = () => {
  const [numFormat, setNumFormat] = useLocalStorageState('numFormat');

  const handleChange = (event) => {
    setNumFormat(event.target.value);
  };

  return (
    <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
      <Select
        value={numFormat || 'myFormat'}
        label="Num format"
        onChange={handleChange}
      >
        <MenuItem value="decimal">Decimal</MenuItem>
        <MenuItem value="fractional">Fraction</MenuItem>
        <MenuItem value="impliedProbability">Probability %</MenuItem>
      </Select>
    </FormControl>
  );
};

And another React component which I want to re-render each time when I change the numFormat in Header:

const FormSettings = () => {
  const [numFormat] = useLocalStorageState('numFormat');
  useEffect(() => {
    console.log(numFormat);
  }, [numFormat]);

  return (
    <h1>{numFormat}</h1>
)}

But there is a problem. When I change the numFormat in the Header nothing changes in the FormSettings.