LocalWalletNotAvailableError : This error is showing even though site is connected to metamask

Question

I have implemented a blockchain based authentication using the code from geekforgeeks but When clicking signup button on my code it shows the following error.

Invalid value given "LocalWalletNotAvailableError". Error: Attempted to index account in local wallet, but no wallet is available.
LocalWalletNotAvailableError: Invalid value given "LocalWalletNotAvailableError". Error: Attempted to index account in local wallet, but no wallet is available.

The account data and netwotk id are loaded correctly but after clicking the sign up button the above mentioned error is shown. i have copied this code from geeksforgeeeks. this is the web3 helper file code.this the link to the geekforgeeks blog text my code for web3helper.js file and Signup.js file are shown.

import Web3 from 'web3';
import Auth from "./build/contracts/Auth.json";

export const loadWeb3 = async () => {
  console.log("Loading web3");
  if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    console.log("Web3 loading to window.ethereum");
    try {
      console.log("Requesting account access");
      // Request account access if needed
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      console.log("Account access granted");
    } catch (error) {
      console.error('User denied account access:', error);
    }
  } else if (window.web3) {
    console.log("Web3 loading to window.web3");
    window.web3 = new Web3(window.web3.currentProvider);
    console.log("Web3 loaded to window.web3");
  } else {
    console.log("Non-Ethereum browser detected");
    window.alert(
      "Non-Ethereum browser detected. You should consider trying MetaMask!"
    );
  }
};

export const loadBlockchainData = async () => {
  console.log("Loading blockchain data");
  const web3 = window.web3;
  // Load account
  console.log("Loading accounts");
  const accounts = await web3.eth.getAccounts();
  console.log("Accounts loaded");

  // Network ID
  console.log("Loading network ID");
  const networkId = await web3.eth.net.getId();
  console.log("Network ID loaded");

  // Network data
  console.log("Loading network data");
  if (networkId) {
    const auth = new web3.eth.Contract(
      Auth.abi,
      Auth.networks[networkId].address
    );
    console.log("Network data loaded");
    console.log("Returning auth and accounts");
    return { auth, accounts: accounts[0] };
  }
};

this the sign up page code

import React, { useState, useEffect } from "react";
import { loadBlockchainData, loadWeb3 } from "../Web3helpers";
import { useNavigate } from "react-router-dom";

export default function SignUp() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [accounts, setAccounts] = useState(null);
  const [auth, setAuth] = useState(null);

  const navigate = useNavigate();

  useEffect(() => {
    loadWeb3();
    loadAccounts();
  }, []);

  const loadAccounts = async () => {
    try {
      console.log("Loading accounts");
      const { auth, accounts } = await loadBlockchainData();
      console.log("Accounts and auth data loaded");
      setAccounts(accounts);
      setAuth(auth);
    } catch (error) {
      console.error("Error loading accounts:", error);
    }
  };

  const signUp = async () => {
    console.log("Sign up button clicked");
    if (!username || !email || !password) {
      alert("Please fill in all details");
      return;
    }

    // const mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    // if (!email.match(mailformat)) {
    //   alert("Please enter a valid email address");
    //   return;
    // }

    try {
      if (!auth) {
        throw new Error("Authentication contract not loaded");
      }
      console.log("auth checked");

      if (!accounts || !accounts.length) {
        throw new Error("No accounts loaded");
      }
      console.log("accounts checked");
      await auth.methods
        .createUser(username, email, password)
        .send({ from: accounts[0] });
      console.log("User created");
      localStorage.setItem("username", username);
      localStorage.setItem("email", email);
      navigate("/");
    } catch (error) {
      console.error("Error signing up:", error.message);
    }
  };

  return (
    <div style={rootDiv}>
      <img
        src="https://media.geeksforgeeks.org/wp-content/uploads/20210318103632/gfg.png"
        style={image}
        alt="geeks"
      />
      <input
        style={input}
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
        type="text"
      />
      <input
        style={input}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        type="text"
      />
      <input
        style={input}
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        type="password"
      />
      <button style={button} onClick={signUp}>
        Sign Up
      </button>
    </div>
  );
}

const rootDiv = {
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  height: "100vh",
};

const input = {
  width: 300,
  padding: 10,
  margin: 10,
  borderRadius: 10,
  outline: "none",
  border: "2px solid grey",
  fontSize: 17,
};

const button = {
  width: 325,
  padding: 10,
  borderRadius: 10,
  margin: 10,
  cursor: "pointer",
  fontSize: 17,
  color: "white",
  backgroundColor: "#9D27CD",
  border: "none",
};

const image = {
  width: 70,
  height: 70,
  objectFit: "contain",
  borderRadius: 70,
};

i have tried to console log every step this the screenshot of the logs in the console. What did i do wrong?