How to use the @material-ui/core.useMediaQuery function in @material-ui/core

}
  const { teams } = React.useContext(TeamContext);
  const [isReady, reset, cancel] = useTimeoutFn(() => {
    setRefresh(true);
    setShowIframe(true)
  }, 2000);
  const isReadOnly = teams.filter((item: any)=>item["id"] === team)[0]["clusters"].filter((cluster: any) => cluster.id === clusterId)[0].admin || email === job['userName'];
  useEffect(()=>{
    if (isReady()) {
      reset();
    }
    return () => {
      cancel()
    }
  },[])
  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
  const [showOpen, setshowOpen] = useState(false)
  const handleWarnClose = () => {
    setshowOpen(false)
  }

  if (!isReadOnly) {
    return (

const AlbumActions = ({
  className,
  ids,
  data,
  record,
  permanentFilter,
  ...rest
}) => {
  const dispatch = useDispatch()
  const translate = useTranslate()
  const classes = useStyles()
  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))

  const handlePlay = React.useCallback(() => {
    dispatch(playTracks(data, ids))
  }, [dispatch, data, ids])

  const handlePlayNext = React.useCallback(() => {
    dispatch(playNext(data, ids))
  }, [dispatch, data, ids])

  const handlePlayLater = React.useCallback(() => {
    dispatch(addTracks(data, ids))
  }, [dispatch, data, ids])

  const handleShuffle = React.useCallback(() => {
    dispatch(shuffleTracks(data, ids))
  }, [dispatch, data, ids])

export function NavBar() {
  const cfg = Config.use()
  const bucket = BucketConfig.useCurrentBucket()
  const { paths } = NamedRoutes.use()
  const notSignIn = !useRoute(paths.signIn, { exact: true }).match
  const selector = React.useCallback(
    createStructuredSelector(
      R.pick(['error', 'waiting', 'authenticated'], authSelectors),
    ),
    [],
  )
  const { error, waiting, authenticated } = reduxHook.useMappedState(selector)
  const t = M.useTheme()
  const useHamburger = M.useMediaQuery(t.breakpoints.down('sm'))
  const links = useLinks()
  return (
    
      {cfg.disableNavigator ? (
        
      ) : (
        
      )}
      {!useHamburger && (
        
          {links.map(({ label, ...rest }) => (
            
              {label}
            
          ))}

export const useDarkMode = () => useMediaQuery("(prefers-color-scheme: dark)");

function SortDropdown({ value, options, makeSortUrl }) {
  const t = M.useTheme()
  const xs = M.useMediaQuery(t.breakpoints.down('xs'))
  const classes = useSortDropdownStyles()
  const [anchor, setAnchor] = React.useState(null)
  const open = React.useCallback(
    (evt) => {
      setAnchor(evt.target)
    },
    [setAnchor],
  )
  const close = React.useCallback(() => {
    setAnchor(null)
  }, [setAnchor])

  const selected = getSort(value)

  return (
    <>

const ArtistListActions = ({ className, ...rest }) => {
  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))

  return (
    
      {isNotSmall && }
    
  )
}

function SampleCardVisualizationWithSelector({ isLoading, data }) {
  const isDesktop = useMediaQuery("(min-width:640px)");
  const grpLabel = "Bus Line";
  const radioLabels = ["14", "72", "20"];
  const [busRoute, setBusRoute] = useState("14");
  const domain = {
    x: [2009, 2017],
    y: [0, 20000]
  };
  return (
    !isLoading &&
    data && (
      <>

export default memo(({ children }: DrawerLayoutProps) => {
  const { location: { pathname } } = useReactRouter()
  const { isExpanded, setExpanded } = useContext(AppBarContext)
  const { user } = useContext(UserContext)
  const [isOpen, setOpen] = useState(false)
  const { error, currentTenant } = useContext(TenantContext)
  const isMobile = useMediaQuery(`(${mobileMediaQuery})`)

  const toggleExpand = useCallback(() => setExpanded(!isExpanded), [isExpanded, setExpanded])
  const openSidebar = useCallback(() => setOpen(true), [setOpen])
  const closeSidebar = useCallback(() => setOpen(false), [setOpen])

  useEffect(closeSidebar, [pathname])
  useEffect(() => {
    if (user!.isAnonymous) {
      toast((
        <div>You're in the demo mode.
            You can sign up here 
            or do it later using buttons in header
        </div>
      ),
      { position: 'top-center', autoClose: false })
    }

const MapPlot = React.forwardRef((props, ref) => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down('sm'));
  const mapGlRef = useRef();
  const plotPoints = useSelector(selectors.selectPointsDisplay);
  const plotPaths = useSelector(selectors.selectPlotPaths);
  const viewport = useSelector(selectors.selectViewport);
  const running = useSelector(selectors.selectRunning);
  const definingPoints = useSelector(selectors.selectDefiningPoints)
  const dispatch = useDispatch()


  useImperativeHandle(ref, () => ({
    getBounds: () => {
      const map = mapGlRef.current.getMap();
      const { _ne, _sw } = map.getBounds();
      return {
        top: _ne.lat,
        bottom: _sw.lat,

const TopContainer = () => {
  const theme = useTheme()
  const isTabletScreen = useMediaQuery(theme.breakpoints.down('sm'))
  const isMobileScreen = useMediaQuery(theme.breakpoints.down('xs'))
  const classes = useStyles()

  const { pathname } = useLocation()

  const { settings, globalStatus, navigation } = useStoreSelector((state) => state)
  const { theme: settingsTheme, lang } = settings
  const { alert, alertOpen } = globalStatus
  const { breadcrumbs } = navigation

  const globalTheme = useMemo(() => (settingsTheme === 'light' ? customTheme : customDarkTheme), [settingsTheme])
  const intlMessages = useMemo>(() => flat(messages[lang]), [lang])

  const dispatch = useStoreDispatch()
  const handleSnackClose = () => dispatch(setAlertOpen(false))