I am having an issue using a breakpoint hook to set the aspect ratio of a client component. The hook in question is a custom hook which can be used to get the current breakpoint and set specific values based on that.

This hook worked like a charm with pages but on the app router it seems there is an inconsistency between what is being console.logged and what is rendering on the page.

I have setup a codesandbox to showcase the issue.
Breakpoint hook in question: https://codesandbox.io/p/devbox/keen-fog-zsn369?file=%2Fapp%2Fhooks%2FuseBreakpoint.tsx
Example component using aspect ratios to showcase the issue: https://codesandbox.io/p/devbox/keen-fog-zsn369?file=%2Fapp%2Fcomponents%2Fexample.tsx%3A16%2C15
The sandbox has issues showing the image in the preview window but can see what Im talking about in its own page: https://zsn369-3000.csb.app/

Current behaviour:
Regardless of the screen width, the aspect ratio always renders as 9/16 aspect ratio on initial load. If I resize the screen to a mobile breakpoint and then back to desktop the correct aspect ratios render.

Expected behaviour:
On the initial load, the aspect ratio should be correctly set.

Have tried:
Using a custom state for aspect ratio and a useEffect hook to set the correct aspect ratio. While this works the solution is not ideal as it causes CLS.

Any insights or solutions would be hugely appreciated.

Edit* - Added a background color to make it visually a bit more clear