PROBLEM: Data returned from the server only renders on the page when refreshed (and not when I change to its route)

So in other words, when I hit the route /repay, the data is returned from the server but it doesn't re-render on the page.

Here is my function that does the following:

• fetches data from server
• takes data and requests new data from second server
• returns data in tokens variable

useEffect(() => {

    if (userAddress) {
      (async () => {

        // fetch data from server
        const res = await axios.get(
          `${config.api.invokeUrl}/users/${userAddress}`
        );

        // take data and send to another server 
        const tempTokenMetadata = []; 
        res?.data?.Items?.map(async (loan, index) => {
          const options = {
            address: loan?.tokenAddress,
            token_id: loan?.tokenId,
            chain: "kovan",
          };
          const tokenIdMetadata =
            await Moralis.Web3API.token.getTokenIdMetadata(options);
          tempTokenMetadata.push(tokenIdMetadata);
        });
        setTokens(tempTokenMetadata);
      })();
    }
    setLoading(false);
  }, [userAddress]);

I'm getting userAddress from my global state value:

const [{ userAddress }] = useStateValue();

Here is how I'm rendering the code on the page:

{tokens?.map((token, index) => {
            return (
              <Grid item xs={10} sm={4} md={4} key={index}>
                <NFT key={index} token={token} />
              </Grid>
            );
          })}