Problem in load css file

[smahmoodh]

"react": "^18.2.0",
"react-device-detect": "^2.2.3",

Windows 11
Chrome Version 112.0.5615.138 (Official Build) (64-bit)

I use 2 components to display mobile and desktop mode.

desktop view
import React from 'react';
import './ProductDesktopView.css';
const ProductDesktopView = () => {
return (
<>
...
</>
)
}
export default ProductDesktopView;

mobile view
import React from 'react';
import './ProductMobileView.css';
const ProductMobileView= () => {
return (
<>
...
</>
)
}
export default ProductMobileView;

product.js
import React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';
import ProductDesktopView from './Des/ProductDesktopView';
import ProductMobileView from './Mob/ProductMobileView';
const Product = () => {
return (
<>
<BrowserView>
<ProductDesktopView />
</BrowserView>
<MobileView>
<ProductMobileView />
</MobileView>
</>
)
}
export default Product
.
.

PROBLEM

When you are in desktop view, the ProductMobileView.css style file that should be displayed in mobile mode is also loaded, and the ProductDesktopView.css file is also loaded for mobile mode.

https://codesandbox.io/s/serene-spence-rhj9yd