I am having an issue rendering an iframe correctly when using react router id names to route the user

Question

I am trying to make it to where when a user clicks on a button it generates a page that displays an iframe.

    import { Link } from "react-router-dom";
    export default function NftCard({ src, name }) {
      return (
        <section className="portal-container">
          <div className="p-card-container">
            <img className="nft-img" src={src} alt="nft-art"></img>
            <h1 className="nft-name">{name}</h1>
            <Link to={`/portal/${name}`}>
              <button className="neon-button view-btn">View</button>
            </Link>
          </div>
        </section>
      );
    }

In my app.js I have it to where when you go to route /test and /portal/:id it renders test.js. The issue is that when i go to route /test it displays it fine. But when i go to /portal/:id the iframe is not visible.

    export default function App() {
      return (
        <div className="App">
          <Routes>
            <Route path="/" element={<Main />} />
            <Route path="/portal" exact element={<PortalPage />} />
            <Route path="/test" exact element={<Test />} />
            <Route path="/portal/:id" element={<Test />} />
          </Routes>
        </div>
      );
    }

    export default function Test() {
      function iframe() {
        return {
          __html: '<iframe src="./872.html" width="700em" height="750em"></iframe>',
        };
      }
      const { id } = useParams();
      const nfts = fullNfts.filter((data) => data.name === id);
      function Stats() {
        return (
          <section className="nft-page">
            {nfts.map((pr) => (
              <div className="" key={pr.id}>
                <div className="stat-container">
                  <h1 className="nft-name">{pr.name}</h1>
                  <h4 className="stat-header">Body</h4>
                  <p className="stat">{pr.Body}</p>
                  <h4 className="stat-header">Clothing</h4>
                  <p className="stat">{pr.Clothing}</p>
                  <h4 className="stat-header">Eyes</h4>
                  <p className="stat">{pr.Eyes}</p>
                  <h4 className="stat-header">Accessory</h4>
                  <p className="stat">{pr.Accessory}</p>
                  <h4 className="stat-header">Prop</h4>
                  <p className="stat">{pr.Prop}</p>
                </div>
                <div dangerouslySetInnerHTML={iframe()}></div>
                <img className="nft-img" src={pr.image} alt="nft-art"></img>
              </div>
            ))}
          </section>
        );
      }