Need always to hard refresh the page after aborting the sync process with a wallet - how to fix this?

Question

I am building a template with Beacon and Taquito and I cant handle one case.

Currently I just sync and unsync with a wallet. But when I abort the sync process and close the Temple or Kukai popup I want to be able to sync again by just clicking the sync button. In my case this is not working and I need to do a hard refresh of the page in order to be able to sync again.

I thought that beaconWallet.clearActiveAccount(); in my catch should do the trick but it seems I did something wrong. I am not sure what I am missing.

The flow sync -> unsync -> sync again works fine without needing to refresh the page.

Thats my App.tsx

import { useEffect, useState } from "react";
import { getAccountAddress, sync, unsync } from "./Wallet";

export function getShorterAccount(address: string) {
  const lastIndex = address.length;
  return (
    address.substring(0, 5) +
    "..." +
    address.substring(lastIndex - 5, lastIndex)
  );
}

function App() {
  const [walletAddress, setWalletAddress] = useState<string | undefined>(
    undefined
  );
  const [error, setError] = useState<string | undefined>(undefined);

  useEffect(() => {
    getAccountAddress().then((address) => setWalletAddress(address));
  }, []);

  const handleWalletAction = () => {
    setError(undefined); // Clear any existing error message

    getAccountAddress().then((r) =>
      r
        ? unsync().then(() => setWalletAddress(undefined))
        : sync()
            .then((address) => setWalletAddress(address))
            .catch(() => {
              setError("An error occurred while syncing. Please try again.");
              setWalletAddress(undefined);
            })
    );
  };

  return (
    <div
      style={{
        width: "100vw",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
        }}
      >
        <button onClick={handleWalletAction}>
          {walletAddress ? "Unsync" : "Sync"}
        </button>
        {error && <p style={{ color: "red" }}>{error}</p>}
        {walletAddress && (
          <>
            <p style={{ fontWeight: "normal" }}>Full Wallet Address: </p>
            <span style={{ fontWeight: "normal" }}>{walletAddress}</span>
          </>
        )}
        {walletAddress && (
          <>
            <p style={{ fontWeight: "bold" }}>
              In case you dont want to display the whole address:{" "}
            </p>
            <span style={{ fontWeight: "bold" }}>
              {getShorterAccount(walletAddress)}
            </span>
          </>
        )}
      </div>
    </div>
  );
}

export default App;

And my Wallet.ts

import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
import { NetworkType } from "@airgap/beacon-sdk";

export const getNetworkType = () => {
  return NetworkType.GHOSTNET;
};

export const getNetworkRCP = () => {
  return "https://ghostnet.ecadinfra.com";
};

const tezos = new TezosToolkit(getNetworkRCP());
const beaconWallet = new BeaconWallet({
  name: "Example",
  preferredNetwork: getNetworkType(),
});
tezos.setWalletProvider(beaconWallet);

export const getAccountAddress = () =>
  beaconWallet.client
    .getActiveAccount()
    .then((r) => (r ? r.address : undefined));

export const isAccountSynced = () => {
  getAccountAddress().then((r) => r !== undefined);
};

export const unsync = () => beaconWallet.clearActiveAccount();

export const sync = () =>
  beaconWallet.client
    .requestPermissions({ network: { type: getNetworkType() } })
    .then((permissions) => {
      return permissions.address;
    })
    .catch((e) => {
      beaconWallet.clearActiveAccount();
      console.error("An error occurred while requesting permissions:", e);
      return undefined; // Return a default value (e.g., undefined) in case of an error
    });

Thats the whole logic but in case someone wants to try here is the repository About any feedback or hints I would be very grateful, thanks.