getTokenIdMetadata function in Moralis is not showing anything on HTML card MUI. How do I fix it?

Question

I am trying to use getTokenIdMetadata from Moralis to get detailed information about an NFT. So far, I am able to get the data as you can see below in the json output, but I am not able to put that data in a nice MUI card component on HTML. Can someone help me?

{
 amount: "1",
 block_number: "10541767",
 block_number_minted: "10541767",
 contract_type: "ERC1155",
 metadata: {
 "name": "popopopopo",
 "description": "popopopo",
 "image": "https://ipfs.moralis.io:2053/ipfs/QmcPePGEGoKLsGpHuRqPNBQScBJWEoR6Ux5etpJw51dKcc"
           },
 name: null,
 owner_of: "0xe8774d8cc8eb58e3183594c3e3922c8813c20bb7",
 symbol: null,
 synced_at: "2022-04-21T07:43:00.481Z",
 token_address: "0x7247d02546ea6d0f1a46403081f1874463fbe08a",
 token_hash: "d4a6bed90c2060adc36d031ab71d24fb",
 token_id: "42",
 token_uri: "https://ipfs.moralis.io:2053/ipfs/QmXUjjJbbj8P4Nm12Gs"  
}

The problem that I am facing now is that the code that I wrote is not showing anything in my cards. Here is the code.

import React, { useState , useEffect } from "react";
import { useMoralis } from "react-moralis";
import CircularProgress from '@mui/material/CircularProgress';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import { useVerifyMetadata } from "hooks/useVerifyMetadata";
import Typography from '@mui/material/Typography';
import {
  useParams
} from "react-router-dom";

const styles = {
  NFTs: {
    display: "flex",
    flexWrap: "wrap",
    WebkitBoxPack: "start",
    justifyContent: "flex-start",
    margin: "0 auto",
    maxWidth: "1000px",
    width: "100%",
    gap: "10px",
  },
};

function NFTDetails() {

    const { Moralis, isInitialized } = useMoralis();
    const { verifyMetadata } = useVerifyMetadata();
    const [metadata, setMetadata] = useState(null);

    let params = useParams();

const fetchNFTMetadata = async () => {
    const options = { chain: "rinkeby", address: params.token_address, token_id: params.token_id };
    const result = await Moralis.Web3API.token.getTokenIdMetadata(options);
    setMetadata(result);

}
useEffect(() => {
  if (isInitialized) {
  fetchNFTMetadata();
  }
}, [isInitialized]);
  console.log(" metadata " , metadata);

    return (
        <div style={{ padding: "15px", maxWidth: "1030px", width: "100%" }}>
          <h1>NFT Details</h1>
          <div style={styles.NFTs}>
           {metadata==null ? (
                   <CircularProgress color="secondary" />
                ) : (
                 <br />
                )}
          {/*  <Skeleton loading={!NFTBalances?.result}>  */}
              {metadata?.result &&
                metadata.result.map((nft, index) => {
                  //Verify Metadata
                  nft = verifyMetadata(nft);

        return (

                     <Card sx={{ maxWidth: 290 }} style={ { display: nft?.token_id === params.token_id ? 'block' : 'none' } } >

                                {console.log(" image ", nft?.metadata)}
                                      <CardMedia
                                              component="img"
                                              height="300"
                                              image={nft?.image || "error"}
                                              alt=""
                                          />
                                                <CardContent>
                                                  <Typography gutterBottom variant="h5" component="div">
                                                          {nft?.metadata?.name ?? "- No Name -"}
                                                  </Typography>
                                                        <Typography variant="h6" color="text.secondary">
                                                        Token ID: {nft?.token_id}
                                                        </Typography>
                                                        <Typography variant="body2" color="text.secondary">
                                                        {nft.token_address}
                                                        </Typography>
                                                </CardContent>
                                          </Card>
                  );
                })}
          </div>

        </div>
      );
}
export default NFTDetails;

So, I know that the output of metadata is correct because the console.log command outputs the contents of metadata. But the html doesn't show anything in the card. Am I doing something wrong?

I think the problem has to do with these lines.

       {metadata?.result &&
                metadata.result.map((nft, index) => {
                  //Verify Metadata
                  nft = verifyMetadata(nft);

Is it correct to assume that the result of the json will be "result"? Or should I write something else here?