Error when trying to access a state variable from a custom context hook

Question

I have defined the following provider with this INITIAL_STATE:

const WalletContext = createContext({} as any);

    const INITIAL_STATE = {
      isOpenWallets: false,
      pollWalletsCount: 0,
      wallets: [],
      walletSelected: undefined,
      walletFound: false,
      walletAPIConnected: false,
      walletAPI: undefined,
      walletAPIVersion: undefined,
      walletIsEnabled: false,
      walletDataLoaded: false,
      walletName: undefined,
      walletIcon: undefined,
      balance: undefined,
      networkId: undefined,
      utxos: undefined,
      tokens: undefined,
      collateralUtxos: undefined,
      changeAddress: undefined,
      addresses: [],
      publicKeys: undefined,
    };

export const WalletProvider = ({ children }: any) => {
  const {
    state,
    rehydrateLocalState,
    toggleWalletsHandler,
    handleWalletSelectHandler,
    connectWithWalletHandler,
    getWalletSelectedHandler,
    getBalanceHandler,
    getNetworkIdHandler,
    getUtxosHandler,
    getTokensHandler,
    getCollateralUtxosHandler,
    getChangeAddressHandler,
    getAddressesHandler,
    getPublicKeysHandler,
    getWalletDataHandler,
  } = useWalletsActions();

  const myStorage = { walletSelected: state.walletSelected, walletAPIConnected: state.walletAPIConnected }

  const { rehydrated, error } = useStorage(myStorage, rehydrateLocalState);

  return (
    <WalletContext.Provider
      value={{
        isOpenWallets: state.isOpenWallets,
        pollWalletsCount: state.pollWalletsCount,
        wallets: state.wallets,
        walletSelected: state.walletSelected,
        walletFound: state.walletFound,
        walletAPIConnected: state.walletAPIConnected,
        walletAPI: state.walletAPI,
        walletAPIVersion: state.walletAPIVersion,
        walletIsEnabled: state.walletIsEnabled,
        walletDataLoaded: state.walletDataLoaded,
        walletName: state.walletName,
        walletIcon: state.walletIcon,
        balance: state.balance,
        networkId: state.networkId,
        utxos: state.utxos,
        tokens: state.tokens,
        collateralUtxos: state.collateralUtxos,
        changeAddress: state.changeAddress,
        addresses: state.addresses,
        publicKeys: state.publicKeys,
        toggleWallets: toggleWalletsHandler,
        handleWalletSelect: handleWalletSelectHandler,
        connectWithWallet: connectWithWalletHandler,
        getWalletSelected: getWalletSelectedHandler,
        getBalance: getBalanceHandler,
        getNetworkId: getNetworkIdHandler,
        getUtxos: getUtxosHandler,
        getTokens: getTokensHandler,
        getCollateralUtxos: getCollateralUtxosHandler,
        getChangeAddress: getChangeAddressHandler,
        getAddresses: getAddressesHandler,
        getPublicKeys: getPublicKeysHandler,
        getWalletData: getWalletDataHandler,
      }}
    >
      {children}
    </WalletContext.Provider>
  );
};

export const useWallets = () => useContext(WalletContext);

The problem I am having is that I am getting the following error...

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

...when trying to access one of the variables in that state, using the custom hook I defined, like this:

const [ walletFound ] = useWallets()

What am I doing wrong?

I have already wrapped all my components with the provider, like this:

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <WalletProvider>
        <Header />
          <Component {...pageProps} />
        <Footer />
      </WalletProvider>
    </>
  )
}

Answer 1

I found the error. I was using [] when I should have been using {}, like this:

const { walletFound } = useWallets()