mockOffChain not returning the recentwinner. -lesson10

[chidubesteve]

Hi, I am having an issue with my mockOffChain script returning the recent winner. After I run npx hh run Script/mockOffChain.js --network localhost, it just logs performed upkeep with requested: 1 then stops the script and if I refresh the UI I don't it is not updated and if I run it again it logs no upkeep needed!. I have written tests for all the backend scripts and they are passing but I don't know why it seems the recent winner isn't being selected and I have also registered it with the Chainlink VRF And Chainlink automaton. I saw a similar issue to this but it didn't solve my problem. I can't paste all the files associated here but This is the link to the repo.
backend repo
frontend
Can anyone help me?
Thanks
here is the front end

import React, { useEffect, useState } from "react";
import { useWeb3Contract, useMoralis } from "react-moralis";
import { abi, contractAddresses } from "../constants";
import { ethers } from "ethers";
import { useNotification } from "web3uikit";

function LotteryEntrance() {
  let { chainId, isWeb3Enabled} = useMoralis();
  //console.log(parseInt(chainId))  // returns the hex value value, so we parseInt it
  chainId = parseInt(chainId);
  const raffleAddress =
    chainId in contractAddresses ? contractAddresses[chainId][0] : null;
  const [entranceFee, setEntranceFee] = useState("0");
  const [numPlayers, setNumberOfPlayers] = useState("0");
  const [recentWinner, setRecentWinner] = useState("0");

  const dispatch = useNotification()


  const { runContractFunction:  enterRaffle,  data: enterTxResponse, isLoading,  isFetching  } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress, //we need to specify the network
    functionName: "enterRaffle",
    params: {}, //no params
    msgValue: entranceFee,
  });

  const { runContractFunction: getEntranceFee } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress, //we need to specify the network
    functionName: "getEntranceFee",
    params: {}, //no params
  });

  const { runContractFunction: getNumberOfPlayers } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress, //we need to specify the network
    functionName: "getNumberOfPlayers",
    params: {}, //no params
  });
  const { runContractFunction: getRecentWinner } = useWeb3Contract({
    abi: abi,
    contractAddress: raffleAddress, //we need to specify the network
    functionName: "getRecentWinner",
    params: {}, //no params
  });

  async function updateUIValues() {
    const entranceFeeFromCall = (await getEntranceFee()).toString()
    const numPlayersFromCall = (await getNumberOfPlayers()).toString()
    const recentWinnerFromCall = await getRecentWinner();

    setEntranceFee(entranceFeeFromCall);
    setNumberOfPlayers(numPlayersFromCall);
    setRecentWinner(recentWinnerFromCall);

    console.log(numPlayers);
    console.log(entranceFee);
    console.log(recentWinner);
  }

  useEffect(() => {
    if (isWeb3Enabled) {
      updateUIValues();

      }

  }, [isWeb3Enabled]);

  const handleSuccess = async (tx) => {
     try {
      await tx.wait(1)
      handleNewNotification(tx)
      updateUIValues()
    } catch (error) {
      console.log(error)
    }

  }
  const handleNewNotification = () => {
    dispatch({
      type: "info",
      message: "Transaction Complete",
      dismissAfter: 5000,
      position: "topR",
      icon: "checkmark",
      title: "Transaction Notification"
    })
  }
  return (
    <div className="p-5">
      Hi from LotteryEntrance
      {raffleAddress ? (
        <div className="">
          <button className="text-white bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded font-bold"
            onClick={async () => {
              console.log("I have been clicked")
              await enterRaffle({
                onSuccess: handleSuccess,
                onError: (error) => console.log(error)
              })
              console.log("I have entered the raffle")
            }}
           disabled= {isLoading || isFetching}>
            {isLoading || isFetching ? (<div className="animate-spin spinner-border h-8 w-8 border-b-2 rounded-full"></div>) : (<div>Enter Raffle</div>)} 
          </button>
          <br/>
          Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH
          <br/>
          Players in Raffle: {numPlayers}
          <br />
          Recent Winner of Raffle: {recentWinner}
        </div>
      ) : (
        <div>No Raffle Address Detected</div>
      )}
      <div></div>
    </div>
  );
}

export default LotteryEntrance;

this is the mockOffChain.js at the back-end

const { ethers, network } = require("hardhat")
const { developmentChains } = require("../helper-hardhat-config")


async function mockKeepers() {
    const checkData = ethers.utils.keccak256(ethers.utils.toUtf8Bytes(""))
    const raffle = await ethers.getContract("Raffle")
    const { upkeepNeeded } = await raffle.callStatic.checkUpkeep(checkData)

    if (upkeepNeeded) {
        const tx = await raffle.performUpkeep(checkData)
        const txReceipt = await tx.wait(1)
        const requestId = txReceipt.events[1].args.requestId
        console.log(`Performed upkeep with RequestId: ${requestId}`)
        if (developmentChains.includes(network.name)) { // I changed this from if(network.config.chainId == 31337) but it sy=till doesn't work
            await mockVrf(requestId, raffle)
        }
    } else {
        console.log("No upkeep needed!")
    }
}

async function mockVrf(requestId, raffle) {
    console.log("We on a local network? Ok let's pretend...")
    const vrfCoordinatorV2Mock = await ethers.getContract("VRFCoordinatorV2Mock")
    await vrfCoordinatorV2Mock.fulfillRandomWords(requestId, raffle.address)
    console.log("Responded!")
    const recentWinner = await raffle.getRecentWinner()
    console.log(`The winner is: ${recentWinner}`)
}

mockKeepers()
    .then(() => process.exit(0))
    .catch((error) => {
        console.error(error)
        process.exit(1)
    })

[chidubesteve]

Hey everyone, sorry for the hassle, everything is working alright now, I guess I just had close all apps and shut down my system and then delete the node modules and run npm i. Cheers