I need to get the metadata of a CNFT from Solana to React

Question

I'm working on a React app that displays metadata for Compressed Non-Fungible Tokens (CNFTs) on the Solana blockchain. I've encountered an issue while trying to fetch metadata using the Solana transaction signature. Here's the relevant code I'm using:

import axios from 'axios';
import { useEffect, useState } from 'react';
import { Connection, PublicKey } from '@solana/web3.js';

function CNFTDisplay() {
    const [metadata, setMetadata] = useState(null);

    useEffect(() => {
    // Define the signature of the CNFT transaction
        const signature = "3MFt6C5pn1kouaw5A8Jmm6X3rm9yFA5q1wwsk9WDMX3oLVnX1dHfUa1zHqTZWdJbjRmhWhGctsp4rJSzFgud8ZqJ";

        // Define the URL for the Solana RPC endpoint
        const rpc_url = "https://api.devnet.solana.com";

        // Connect to the Solana network
        const connection = new Connection(rpc_url);

        // Get the transaction information for the signature
        connection.getTransaction(signature).then(transaction_info => {
        // Extract the token ID from the transaction information
        const token_id = transaction_info?.meta?.innerInstructions?.[0]?.toString();

        // Define the URL for the metadata endpoint
        const metadata_url = `https://api.devnet.solana.com/metadata/accounts/${token_id}`;

        // Send the request to the metadata endpoint
        axios.get(metadata_url)
            .then(response => {
            setMetadata(response.data);
            })
            .catch(error => {
            console.error(error);
            });
        });
    }, []);

    if (metadata === null) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <h1>{metadata.name}</h1>
            <p>{metadata.description}</p>
            <img src={metadata.image} alt={metadata.name} />
        </div>
    );
    }

export default CNFTDisplay;