Prerender a page but have the correct conditional page? - reactjs

Question

I would like to pre-render my Black Friday pages. But when it is expired, it should show an expired page instead.
The issue with the code below is that it is loading the Black Friday page, then the expired page (presumably because it takes longer). The end result is the user gets an expired page with mixed styling from the Black Friday page styling. How do I fix this?
export async function getStaticPaths() {
const blackFridaylugs = await ContentfulApi.getBlackFridaySlugs();
const paths = blackFridaySlugs.map((item) => ({
params: { slug: item.slug }
}));
return {
paths,
fallback: "blocking"
};
}
export async function getStaticProps({ preview = false, params, previewData }) {
const page = await ContentfulApi.getBlackFridayPromoBySlug(params.slug, {
preview,
enviroment: previewData?.enviroment
});
const expiredPage = await ContentfulApi.getPageContentBySlug(
"expired-page",
{
preview,
enviroment: previewData?.enviroment
}
);
const globalSettings = await ContentfulApi.getGlobalSettings({ preview });
return {
props: {
page,
expiredPage,
globalSettings
},
revalidate: 100
};
}
function BlackFridayPages({ page, expiredPage, globalSettings }) {
const blackFridayEndDate = new Date('2023-02-20') //Change this to test
const now = new Date();
const expired = blackFridayEndDate < now
if (expired) {
return (
<ExpiredPage expiredPage={expiredPage} />
);
}
return (
<>
<BlackFridayPage />
</>
); //no extra conditional because I want it pre-rendered. Am I not allowed to do this?
}
export default BlackFridayPages;
Replicate bug:
1- User loads bf page when not expired
2- let the page expired
3- refresh
4- User gets the expired page (but it is not styled correctly)