WalletMultiButton only establishes a connection to Phantom wallet every other time

Question

I've been following along soldev course and I'm now starting to interact with a browser wallet interact-with-wallets. Problem is whenever I try to connect to a wallet it only connects after two clicks. The error on first click is the following: DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'walletName' exceeded the quota.

The code I'm using:

import './App.css';
import {WalletContextProvider} from './components/WalletContextProvider';
import {PingButton} from './components/PingButton';
import AppBar from './AppBar';

function App() {
  return (
    <WalletContextProvider>
      {/* <AppBar /> */}
      {/* <PingButton /> */}
    </WalletContextProvider>
 )
}

export default App;

import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom'
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletModalProvider, WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import { clusterApiUrl } from '@solana/web3.js'
import React, { ReactNode } from 'react'
require('@solana/wallet-adapter-react-ui/styles.css')

interface WalletContextProviderProps {
    children: ReactNode
}

export function WalletContextProvider({children}: WalletContextProviderProps) {
  const endpoint = clusterApiUrl('devnet')
  const wallets = [new PhantomWalletAdapter()]

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets}>
        <WalletModalProvider>
          <WalletMultiButton />
          {/* {children} */}
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  )
}

Following https://github.com/solana-labs/wallet-adapter#ui-components led to the same error