I'm using an iframe:

<iframe
                width="100%"
                height="100%"
                frameBorder="0"
                title="Spline 3D Animation"
                allowTransparency={true}
                style={{ backgroundColor: "transparent" }}
                src="https://my.spline.design/portfolio-fe0fd4b29cba7bfea175804f995a9f8a/"
></iframe>

The console shows:

Warning: React does not recognize the `allowTransparency` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `allowtransparency` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React version: ^17.0.2

Link to code example: The entire code for this is here https://github.com/akashshyamdev/portfolio-latest/blob/master/src/containers/Home/Hero.tsx

The current behavior

The expected behavior

I expect the black background to be transparent