GlobalState doesn't emit when trying to set state back to initialState

[philiptzou]

Minimal code for reproducing the problem:

import React from 'react';
import createPersistedState from 'use-persisted-state';

const useFlag = createPersistedState("flag");

function Inner() {
  const defaultFlag = false;
  const [flag, setFlag] = useFlag(defaultFlag);

  return <div onClick={handleClick}>{flag.toString()}</div>;

  function handleClick() {
    setFlag(!flag);
  }
}

export default function Outer() {

  return <div>
    <Inner key={1} />
    <Inner key={2} />
    <Inner key={3} />
  </div>;
}

The code works well when the local storage variable "flag" was set to false. However, when "flag" was set to true, clicking one of the <Inner /> element doesn't change the flag state of other <Inner />'s. Because GlobalState compares the new value to the defaultFlag, but not to the variable "flag" from the local storage.