After upgrade to version 5 'styled-components' is broken - reactjs

Question

I have the below components made with styled-components. I used to work fine with version 4.2.0. In order to cover my App with unit-tests, I upgraded styled-components to the version: 5.3.6.
After that, styled components stopped working on the "first render" when I am running a pre-compiled bundle. Under "development server" everything is still running normally.
However, when the page renders from a bundle, styles are missing. When I inspect the page, there is a style name my divs, and those styles do not exist.
My components are below:
import styled from 'styled-components';
export default styled.div`
text-align: center;
width: 46px;
min-height: 100vh;
flex-direction: column;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
&:hover {
width: 250px;
text-align: left;
}
#media (max-width: 768px) {
display: none;
&.mobileOpen {
display: flex;
&:hover {
width: 46px;
text-align: left;
}
}
`;
export const MobileNavBar = styled.div`
#media (min-width: 769px) {
display: none;
}
#media (max-width: 768px) {
position: fixed;
z-index: 10;
text-align: center;
width: 100vw;
height: 60px;
flex-direction: row;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
justify-content: space-between;
}
`;
export const MobileNavBarOpen = styled.div`
position: fixed;
top: 60px;
text-align: center;
width: 46px;
height: 100vh;
flex-direction: column;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
padding-bottom: 100px;
&:hover {
width: 250px;
text-align: left;
}
#media (max-width: 768px) {
display: none;
&.mobileOpen {
display: flex;
&:hover {
width: 46px;
text-align: left;
}
}
`;
My best guess is that styles are generated, then there is a render, and the class name changes under this re-render. The new style-class name is different from the previous one, so my styles are not being associated with the components. I don't have SSR or anything fancy here, just building the bundle with CRA npm run build.
Interestingly, if I press the browser refresh button, the styles appear fine.
What could I do to fix this?