Random white background when importing a component using an <iframe>

[NickVanzo]

Hi everyone, I'm creating a basisc next.js application where I want to display a widget I've created in NEAR.
I'm importing the widget like this using an iframe:

import Link from "next/link";

export default function page() {
    return (
        <div>
            <p>Hello Nick!</p>
            <Link href="/settings" >Click me to go to back to settings</Link>
            <iframe
            style={{
                width: "100%",
                backgroundColor: "black"
            }}
            src="https://near.social/#/embed/nickvanzo307.near/widget/Onboarding.Starter?name=Allen" />
        </div>
    )
}

This is the code of my component:

const title = "Sign in with Lens";

function navigate() {
  if (props.handle != null) {
    const handle = props.handle;
    if (!handle.includes(".lens")) {
      handle = handle + ".lens";
    }
    console.log(handle);
    const uri = `https://www.lensfrens.xyz/${handle.toLowerCase()}/follow`;
    window.open(uri, "_newtab");
  }
}

return (
  <button
    style={{
      backgroundColor: "#ABFE2C",
      color: "black",
      borderRadius: "5px",
      padding: "10px",
      border: "none",
    }}
    onClick={navigate}
  >
    {title}
  </button>
);

I can show the component on my web page but the iframe has a white background without any reason. What may be the cause?