I have multiple stuff in my mapping of solidity, i want to return all those in my front-end (react) and so i read multiple questions here on stackoverflow and got to know that we can not loop over that mapping, so then i did this:

uint256 public pendingRequestID = 1;
mapping(uint256 => Request) public requests;

struct Request {
    uint256 id;
    address CurrentOwner;
    uint256 price;
    string details;
    string Pictures;
}

function totalAddPendingRequest() public view returns (uint256) {
    return pendingRequestID;
}

   function requestToAddProperty(address _CurrentOwner,uint256 _price,string memory _details,string memory _picture
) public {

    requests[pendingRequestID] = Request(
        pendingRequestID,
        _CurrentOwner,
        _price,
        _details,
        _picture
    );
    pendingRequestID++;
}

Now i have pendingRequestID to loop on and can return those mapping values one by one.. butt:

This is my react Code:

const [realEstateContract , setRealEstateContract] = useState({});
const [totalRequestedProperties, setTotalRequestedProperties] = useState();

// tried this as well:
// const [totalRequestedProperties, setTotalRequestedProperties] = useState(0);

console.log(realEstateContract);

useEffect(()=> {
  const RealEstateContractAddress = '0x8B9a94Cc88D8CEBF1b9D903De5851fAef62b0eB9';
  const provider = new ethers.providers.Web3Provider(window.ethereum)
  const signer = provider.getSigner()
  const RealEstateContract = new ethers.Contract(RealEstateContractAddress, RealEstateabi, signer);

  setRealEstateContract(RealEstateContract);
  pendingIdFunction();

},[])

async function pendingIdFunction() {
  await realEstateContract &&  realEstateContract.totalAddPendingRequest().then(r => {
    setTotalRequestedProperties( BigNumber.from(r._hex).toString())
  })

}

console.log(totalRequestedProperties);

Now this realEstateContract returns my contract and i get that totalRequestedProperties returns my exact number but for some reasons, my loop is not working ,, after figuring out i found that this totalRequestedProperties returns undefined first and then goes with my number , even that realEstateContract returns empty object first and then goes with my actual contract data ,, how to deal with it at first place?

This is how i am doing it:

  <div>{totalRequestedProperties}</div>
  {[...Array(totalRequestedProperties)].map((e, i) => "faroqq" )}

Result and Console: i just cant get that loop , those totalrequests are fine.