message: refactor: refactor effects of useMediaQuery
diff: import { useEnvironment } from "@chakra-ui/react-env"
  -import { isBrowser, isFunction } from "@chakra-ui/utils"
  -import { useEffect, useLayoutEffect, useMemo, useState } from "react"
  -
  -const useSafeLayoutEffect = isBrowser ? useLayoutEffect : useEffect
  +import { isFunction } from "@chakra-ui/utils"
  +import { useEffect, useState } from "react"
  export type UseMediaQueryOptions = {
  fallback?: boolean | boolean[]
  @@ -23,10 +21,7 @@ export function useMediaQuery(
  const env = useEnvironment()
  - const queries = useMemo(
  - () => (Array.isArray(query) ? query : [query]),
  - [query],
  - )
  + const queries = Array.isArray(query) ? query : [query]
  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback]
  fallbackValues = fallbackValues.filter((v) => v != null) as boolean[]
  @@ -41,17 +36,13 @@ export function useMediaQuery(
  })
  useEffect(() => {
  - // set initial matches
  setValue(
  queries.map((query) => ({
  media: query,
  matches: env.window.matchMedia(query).matches,
  })),
  )
  - // eslint-disable-next-line react-hooks/exhaustive-deps
  - }, [])
  - useSafeLayoutEffect(() => {
  const mql = queries.map((query) => env.window.matchMedia(query))
  const handler = (evt: MediaQueryListEvent) => {
  @@ -74,7 +65,8 @@ export function useMediaQuery(
  else mql.removeEventListener("change", handler)
  })
  }
  - }, [])
  + // eslint-disable-next-line react-hooks/exhaustive-deps
  + }, [env.window])
  return value.map((item) => item.matches)
  }
  