docs: function MyComponent() {
    const theme = useTheme();
    const width =
      [...theme.breakpoints.keys].reverse().reduce((output, key) => {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        const matches = useMediaQuery(theme.breakpoints.only(key));
  
        return !output && matches ? key : output;
      }, null) || 'xs';
  
    return <span>{`width: ${width}`}</span>;
  }