Solidity based blockchain not getting account and networkId

Question

So, I have forked a project from my friend and we need to work on it but apparently after doing npm install and npm start. It is just showing Loading web3,accounts, contracts. I read somewhere that I need to use truffle migrate but is not identifying truffle. So, here for some help. Here, is the Home.js file

 import { useEffect, useState } from "react";
import TempContract from "./truffle_abis/TempContract.json";
import Web3 from "web3";
import Base from "./components/Base";

const Home = () => {
  const [contractInstance, setContractInstance] = useState(undefined);
  const [account, setAccount] = useState(null);
  const [web3, setWeb3] = useState(null);
  const [isOwner, setIsOwner] = useState(false);
  const [start, setStart] = useState();
  const [end, setEnd] = useState();
  const [loading, setLoading] = useState(false);

  const getData = async () => {
    try {
      setLoading(true);
      const web3 = new Web3(Web3.givenProvider || "ws://localhost:7545");
      const accounts = await web3.eth.getAccounts();
      console.table(accounts);
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = TempContract.networks[networkId];
      const instance = new web3.eth.Contract(
        TempContract.abi,
        deployedNetwork && deployedNetwork.address
      );
      setContractInstance(instance);
      setAccount(accounts[0]);
      setWeb3(web3);
    } catch (error) {
      console.log("Failed to load web3, accounts, or contract.");
      console.log("Get Data error: ", error);
    } finally {
      console.log("Loaded all data");
      setLoading(false);
    }
  };

  const getInfo = async () => {
    if (contractInstance && account) {
      console.log(contractInstance);
      const owner = await contractInstance.methods.getOwner().call();
      console.log("owner: ", owner);
      console.log("account: ", account);
      if (account === owner) {
        setIsOwner(true);
      }

      let start = await contractInstance.methods.getStart().call();
      let end = await contractInstance.methods.getEnd().call();
      setStart(start);
      setEnd(end);
    }
  };

  useEffect(() => {
    if (!window.location.hash) {
      window.location = window.location + "#loaded";
      window.location.reload();
    }
  }, []);

  useEffect(() => {
    getData();
  }, []);

  useEffect(() => {
    getInfo();
  }, [contractInstance, account]);

  useEffect(() => {
    console.log(loading);
  }, [loading]);

  return (
    <div>
      <div>
        {!web3 ? (
          <div>
            <div>
              <h1>Loading web3,accounts and contracts </h1>
            </div>
          </div>
        ) : (
          <div>
            <Base isOwner={isOwner} />
            <div>
              <h1>Welcome to the voting app</h1>
            </div>{" "}
            Hello! <div> Your address is {account} </div>
            {isOwner ? (
              <div>You are owner </div>
            ) : (
              <div>You are not owner </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;

And here is the package.json

{
  "name": "blockchain-voting",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.0",
    "@mui/material": "^5.2.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "^5.1.3",
    "history": "^5.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-bootstrap-table": "^4.3.1",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "^5.0.1",
    "web-vitals": "^1.0.1",
    "web3": "^4.7.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "^2.5.1",
    "prettier-plugin-solidity": "^1.0.0-beta.19"
  }
}

and truffle.config

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545,
      network_id: "*",
    },
  },
  compilers: {
    solc: {
      version: "0.8.10",
      optimizer: {
        enabled: true,
        runs: 200,
      },
    },
  },
  contracts_directory: "./src/contracts/",
  contracts_build_directory: "./src/truffle_abis/",
};