How to use the @react-md/utils.useAppSize function in @react-md/utils

const AppSize: FunctionComponent = () => {
  const appSize = useAppSize();
  // const [appSize, setSize] = useState(getCurrentAppSize());
  // useEventListener("resize", () => setSize(getCurrentAppSize()));

  return (
    
      
      
    
  );
};

export default function useLayout({
  phoneLayout,
  tabletLayout,
  landscapeTabletLayout,
  desktopLayout,
  largeDesktopLayout,
}: LayoutConfiguration): LayoutNavigationVisibility {
  const appSize = useAppSize();
  const layout = getLayout({
    appSize,
    phoneLayout,
    tabletLayout,
    landscapeTabletLayout,
    desktopLayout,
    largeDesktopLayout,
  });

  const { isDesktop } = appSize;
  const isFullHeight = layout === "full-height";
  const isPersistent = isPersistentLayout(layout);

  const [visible, setVisible] = useState(isPersistent && isDesktop);

  useEffect(() => {

const CurrentSize: FC = () => {
  const context = useAppSize();
  return (
    
      
      {JSON.stringify(context, null, 2)}
    
  );
};

export const AppSize: FunctionComponent> = ({
  children,
  ...defaults
}) => {
  const value = useAppSize({ defaultValue: defaults as AppSizeType });
  return (
    {children}
  );
};