How to change prop based on breakpoints?

[peak aurora]

for example tabs from horizontal to vertical?

The solution I see is something like this
<MediaQuery styles={highlight}>
<MyTabs />
</MediaQuery>

<MediaQuery largerThan="lg" >
<MyTabs orientation='horizontal' />
</MediaQuery>

but may be there is a better way?
https://codesandbox.io/s/elegant-merkle-8tjrsg?file=/src/App.tsx

[craggy lagoon]

you can use the hook and change orientation based on that
https://mantine.dev/hooks/use-media-query/