How to fix CBOR decode error using useCardano()

Question

I have just started learning Cardano development. I’ve encountered some issues and I’m seeking assistance.

I created a sample react app project. And I installed “@cardano-foundation/cardano-connect-with-wallet”. If I import useCardano from that module and use it, I got an error “CBOR decode error: non-string keys not supported (got object)”.

This is my code.

import logo from './logo.svg';
import './App.css';

import { useCardano } from '@cardano-foundation/cardano-connect-with-wallet';

function App(props) {
  const { 
      isEnabled,
      isConnected,
      enabledWallet,
      stakeAddress,
      signMessage,
      connect,
      disconnect 
  } = useCardano();

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

What’s wrong with it? Thank you for your help.

how to clear the error?