How to use the react-use.useMedia function in react-use

console.error(e); // eslint-disable-line no-console
          setError(e);
          return;
        }
        setError(null);
      }}
      editorDidMount={instance => {
        cmInstance.current = instance;
      }}
    />
  );

  const fileExtension =
    relativePath.split('.')[relativePath.split('.').length - 1] || 'js';

  const isWide = useMedia('(min-width: 767.99px)', true);

  return (
    <div>
      
        <div>
          {error ? (
            </div></div>

}
  }, [path]);

  // 移动端下弹出菜单时，禁止页面滚动
  useEffect(() => {
    if (popupMenuVisible) {
      document.documentElement.style.overflow = 'hidden';
    } else {
      document.documentElement.style.overflow = '';
    }
    return () => {
      document.documentElement.style.overflow = '';
    };
  }, [popupMenuVisible]);

  const isWide = useMedia('(min-width: 767.99px)', true);
  const menuIcon = !isWide ? (
    
  ) : null;

  const productItemProps = isWide
    ? {
        onMouseEnter: onProductMouseEnter,
        onMouseLeave: onProductMouseLeave,
      }
    : {
        onClick: onToggleProductMenuVisible,
      };

const Room = ({ rooms, activeRoomId }) => {
	const isDesktop = useMedia("(min-width: 720px)");

	if (!activeRoomId) return null;

	return (
		
			
				

				{_.map(rooms, (room, roomId) => (
					
				))}
				
			
			{isDesktop && }
		
	);

<span>
                    {doc &amp;&amp; doc.title
                      ? capitalize(doc.title[i18n.language])
                      : menuItemLocaleKey}
                  </span>
                
              }
            &gt;
              {renderMenuItems(groupedEdges[slugString])}
            
          );
        })}
    
  );

  const isWide = useMedia('(min-width: 767.99px)', true);
  const [drawOpen, setDrawOpen] = useState(false);
  const menuSider = isWide ? (
    
      {menu}
    
  ) : (
    
      }
      wrapperClassName={styles.menuDrawer}
      onChange={open =&gt; setDrawOpen(!!open)}
      width={280}

const WebMentions = props => {
  const layers = useLayers();
  const textColor = useTextColor();
  const isWide = useMedia("(min-width: 480px)");
  return (
    <div>
      Web Mentions
      {props.mentions.edges.map(({ node }) =&gt; {
        const { content, author } = node;
        return (
          </div>

const menu = (
    <menu style="{{" mode="inline"> setOpenKeys(currentOpenKeys)}
      inlineIndent={16}
      forceSubMenuRender
    &gt;
      {renderMenu(menuData)}
    </menu>
  );

  const isWide = useMedia('(min-width: 767.99px)', true);
  const [drawOpen, setDrawOpen] = useState(false);
  const menuSider = isWide ? (
    
      {menu}
    
  ) : (
    
      }
      wrapperClassName={styles.menuDrawer}
      onChange={open =&gt; setDrawOpen(!!open)}
      width={280}