Hot reloading not working on styled components with default export

[nop33]

Hot Reloading when changing the CSS code for a styled component exported with export default is not working. A hard refresh is required to see the CSS changes.

const NavItem = ({ className} ) => <div className={className}>...</div>

export default styled(NavItem)`
  color: red;
`

The following works, however:

const NavItem = () => <NavItemContainer>...</NavItemContainer>

export default NavItem

const NavItemContainer = styled.div`
  color: red;
`

Related @vitejs/plugin-react issue: vitejs/vite-plugin-react#6

I wouldn't like to once again refactor the code and bring back the "containers" components. It adds extra friction to coming up with names...