Prevent layout shift with breakpoints

I'm using material-ui v5, in case that matters.

So I have a Button component, which should display in fullWidth when the user is viewing it in mobile.

I have decided to use useMediaQuery. Something like:

const smDown = useMediaQuery(theme => theme.breakpoints.down("sm"))
return (
  <Button fullWidth={smDown}>
    Label
  </Button>
);

Yet, since I'm using React, which uses hydration. useMediaQuery will first return a false value before returning the correct value. And this causes a layout shift when viewing on mobile.

Is there a better way to achieve what I'm looking for? Besides duplicating the component and dynamically hide one of them with display: none?