React parallax component showing height of 0 despite having content? - node.js

Question

Context: I'm trying to add a parallax effect to the homepage of my website, but my parallax component AdvanceBanner is returning a height of 0 even though the children div is being rendered.
Whenever I try to render this component on a blank react project, everything works as intended but when I move it over to my main nextjs project it doesn't display as intended.
This tells me that it's either something with the parent components or it's the styling of the site.
Here's everything that's relevant, any sort of help/advice is very much appreciated :)
AdvancedBanner.tsx
import { ParallaxBanner } from "react-scroll-parallax";
import { BannerLayer } from "react-scroll-parallax/dist/components/ParallaxBanner/types";
export const AdvancedBannerTop = () => {
const background: BannerLayer = {
image:
"https://i.postimg.cc/662d6ZT1/Galaxy.png",
translateY: [0, 50],
opacity: [1, 0.3],
scale: [1.05, 1, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true
};
const headline: BannerLayer = {
translateY: [0, 30],
scale: [1, 1.05, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true,
expanded: false,
children: (
<div className="inset center">
<h1 className="headline white">Gaming Galaxy</h1>
</div>
)
};
const foreground: BannerLayer = {
image:
"https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png",
translateY: [0, 15],
scale: [1, 1.1, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true
};
const gradientOverlay: BannerLayer = {
opacity: [0, 1, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true,
expanded: false,
children: <div className="gradient inset" />
};
return (
<ParallaxBanner
layers={[background, headline, foreground, gradientOverlay]}
className="full"
/>
);
};
ParallaxApp.tsx
import { ParallaxProvider } from "react-scroll-parallax";
import { AdvancedBannerTop } from "./AdvancedBanner";
import './styles.module.css'
export default function ParallaxApp() {
return (
<ParallaxProvider>
<AdvancedBannerTop/>
<div className="center full background">
<h1 className="headline text-cloudy-day font-oxanium-bold">TEXT TWO</h1>
</div>
</ParallaxProvider>
);
}
styles.module.css
.subline {
font-family: "Oxanium", Helvetica, Arial, sans-serif;
font-weight: 250;
font-size: 1vw;
}
.headline {
font-family: "Oxanium", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 10vw;
}
.inset {
position: absolute;
inset: 0;
}
.white {
color: white;
}
.gray {
color: #ffffff;
}
.full {
height: 100vh;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.gradient {
background: linear-gradient(rgba(193, 28, 133, 0.5) 50%, #1F1329);
}
.background {
background-image: url('./area_bg01.jpg');
}
Layout.tsx
<main className="bkg1 py-6 md:py-12">
<div>{children}</div>
</main>
Index.tsx (homepage)
import ParallaxApp from "../components/Parallax Space/ParallaxApp"
function Home() {
return (
<div>
<ParallaxApp/>
</div>
);
}
export default Home;
Only "TEXT TWO" is currently being displayed on the homepage, but upon further inspection, all 4 BannerLayers are rendered just not displayed due to the height of ParallaxApp being 0.