How to use the redux-react-hook.useMappedState function in redux-react-hook

export function useProblemList() {
  useProblems()
  return useMappedState(getProblemList)
}

export function useSubmissionList() {
  useSubmissions()
  return useMappedState(getSubmissionList)
}

export function useAnnouncements() {
  const dispatch = useAppThunkDispatch()

  useSingleEffect(
    'USE_ANNOUNCEMENTS',
    () => {
      const subs = dispatch(subscribeAnnouncementsAction())
      return () => {
        subs.then(unsub => unsub()).catch(globalErrorCatcher)
      }
    },
    []
  )

  return useMappedState((state: AppState) => state.contest.announcements)
}

const Audit = ({ classes }) => {
  const { loading, message, mode, result } = useMappedState(mapState);
  const [metadataValues, setMetadata] = useState({
    dependencies: 0,
    devDependencies: 0,
    optionalDependencies: 0,
    vulnerabilities: null,
    advisories: null
  });
  const dispatch = useDispatch();
  const { content, error } = result || {};

  const auditRun = option =>
    dispatch(
      runAudit({
        ipcEvent: 'npm-audit',
        cmd: ['audit'],
        options: {

export const Menu: FunctionComponent = memo(() => {
  console.warn(" - ");
  const { highScore } = useMappedState(mapState);
  const { navigateToPlayground } = useMappedActions(mapActions);
  const [animationStatus, setAnimationStatus] = useState<"showing" | "hiding">(
    "showing"
  );

  const handlePress = async () => {
    setAnimationStatus("hiding");
    await delay(MENU_ANIM_DURATION);
    navigateToPlayground();
  };

  return (

const Dashboard = props => {
  const { classes } = props;

  const {
    packages,
    packagesOutdated,
    loading,
    directory,
    mode,
    projectName,
    projectVersion,
    projectDescription,
    projectLicense,
    lastUpdatedAt
  } = useMappedState(mapState);

  const title =
    mode === APP_MODES.LOCAL ? `Project ${projectName || ''}` : 'Global';
  const text =
    mode === APP_MODES.LOCAL ? projectDescription : APP_INFO.GLOBAL_MESSAGE;

  return (
    <section>
      
        
          </section>

export const TopNavigationBar: FunctionComponent = () => {
  useContestOnly()
  const user = useMe()
  const breadcrumbs = useMappedState(selectBreadcrumb)
  const push = usePush()
  const signOut = useSignOut()

  const breadcrumbWithRouter = breadcrumbs.map(breadcrumbItem => ({
    ...breadcrumbItem,
    onClick: () => {
      if (breadcrumbItem.href) push(breadcrumbItem.href)
    },
    href: undefined,
  }))

  const handleSignOut = async () => {
    await signOut()
    TopToaster.showSuccessToast('Signed Out')
  }
  const handleMyAccount = () => push('/account')

export function useServerClock(refreshRate: number = 1000) {
  const clockStat = useMappedState(getClock)

  function calculateNow() {
    if (clockStat.clock) {
      const now = Date.now()
      const localClock = clockStat.localClock.getTime()
      const serverClock = clockStat.clock.getTime()
      return new Date(now + serverClock - localClock)
    }
    return undefined
  }

  useLoadServerClock()
  const [clock, setClock] = useState(calculateNow())
  const [current, setCurrent] = useState(new Date())

  useEffect(() => {

export function useProxySetting(): [
  ProxySetting,
  (
    host: string,
    port: string | number,
    username?: string,
    password?: string
  ) => any
] {
  const proxySetting = useMappedState(getProxySetting)
  const dispatch = useAppDispatch()
  const setFunction = (
    host: string,
    port: string | number,
    username?: string,
    password?: string
  ) => {
    dispatch(setProxy(host, port, username, password))
  }
  return [proxySetting, setFunction]
}

const AppTopBar = ({ classes, className }) => {
  const {
    metricsRegistry,
    auditLevel,
    cache,
    mode,
    directory,
    notifications,
    loading,
    activePage
  } = useMappedState(mapState);

  const [initFlow, toggleInitFlow] = useState({
    show: false,
    directory: null
  })
  const [dialog, setDialog] = useState({
    open: false,
    title: '',
    active: null
  });

  const dispatch = useDispatch();

  const onLoadDirectory = useCallback(() => {
    const dialogHandler = filePath => {
      dispatch(