css – How to show a phone mockup in Desktop view in React.js

I have a MobileView component that uses the DaisyUI phone mockup to display a Home component within a mobile device frame:

Inside the Home component, I use different viewports (sm, md, lg) to control the layout. However, when this mockup is displayed on a desktop view, the Home component still shows its desktop layout, instead of switching to mobile view. The layout changes correctly when the viewport is adjusted to mobile size.

How can I ensure that the Home component adapts to mobile layout when viewed inside the phone mockup, without modifying the Home component itself? If modifying the Home component is the only solution, I am open to that as well. If possible i want to use tailwind viewports.

I tried something like this, but no luck.