Investigate `useLayoutEffect` console error

[taysea]

Currently, a console error is thrown about useLayoutEffect:

To do:

• Investigate cause (likely use of ReactDOMServer + useLayoutEffect from grommet component does't place nicely because useLayoutEffect is client-side only)
• Determine best approach to stop error from appearing in console. File PR to fix.

[taysea]

Mike mentioned we have a strategy of how to deal with this in Grommet, so reach out to him for where to look.

[MikeKingdom]

From grommet's use-isomorphic-layout-effect.js:

/* eslint-disable no-restricted-imports */
import { useLayoutEffect as vanillaUseLayoutEffect, useEffect } from 'react';

/**
 * A substitute for React's useLayoutEffect, which does not generate warnings on
 * SSR. It is named useLayoutEffect so that all eslint rules applying to the
 * original useLayoutEffect would also apply to it.
 * This solution was suggested by Alex Reardon.
 * @see https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
 * @see https://github.com/grommet/grommet/issues/4765
 */
export const useLayoutEffect =
  typeof window !== 'undefined' ? vanillaUseLayoutEffect : useEffect;

export default useLayoutEffect;