нужно этот код переписать так, чтобы у меня было три кнопки. первая будет отвечать за логин пользователю. вторая за проверку пользователя, что тот в системе еще, пока действует jwt. третья за выход пользователя из системы

App.js
import { Button, LoadIndicator, TextBox } from 'devextreme-react';
import { useCallback, useMemo, useRef, useState, useEffect } from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { useFetching } from './useFetching';
import ADAPIAuth from './api';

const tokenFromStorage = window.localStorage.getItem('token');

function App() {
  const loginRef = useRef(null);
  const passwdRef = useRef(null);

  const [response, setResponse] = useState(null);
  const [axiosError, setAxiosError] = useState(null);
  const [moreErr, setMoreErr] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [currentToken, setCurrentToken] = useState(tokenFromStorage);
  const [infoData, setInfoData] = useState(null);

  const [loadTokenInfo, tokenInfoIsLoading, tokenInfoLoadFail] = useFetching(
    async () => {
      try {
        const answer = await ADAPIAuth.getTokenInfo();
        if (answer.status === 200) {
          setInfoData(answer.data);
        } else {
          setInfoData(null);
        }
      } catch (e) {
        console.log(e);
        setInfoData(null);
      }
    }
  );

  const [postLoginCreds, loginInProcess, loginFail] = useFetching(async () => {
    const answer = await ADAPIAuth.postLogin(
      loginRef.current.instance.option('value'),
      passwdRef.current.instance.option('value')
    ).catch((e) => {
      setResponse(null);
      setAxiosError(e);
    });
    if (answer.status === 200) {
      setAxiosError(null);
      setResponse(answer);
      window.localStorage.setItem('token', answer.data.token.access_token);
    }
  });
  const moreButtonText = useMemo(() => {
    if (moreErr) {
      return 'More (hide)';
    } else return 'More (show)';
  }, [moreErr]);

  const loginClicked = useCallback(() => {
    postLoginCreds();
  }, [postLoginCreds]);
  const moreErrClicked = useCallback(() => {
    setMoreErr(!moreErr);
  }, [moreErr]);
  const swPage = useCallback(() => {
    const newPage = currentPage === 1 ? 2 : 1;
    setCurrentPage(newPage);
  }, [currentPage]);

  useEffect(() => {
    if (!infoData && !tokenInfoIsLoading) {
      loadTokenInfo();
    }
  }, [infoData, tokenInfoIsLoading]);

  return (
    <div>
      {currentPage === 2 && (
        <>
          xxx
          <div>
            <Button text="switch_page" onClick={swPage} />
            <LoadIndicator visible={tokenInfoIsLoading} />
            {currentToken}
            {infoData && (
              <>
                Info Data success!
                <pre>{JSON.stringify(infoData)}</pre>
              </>
            )}
          </div>
        </>
      )}
      {currentPage === 1 && (
        <>
          <Button text="switch_page" onClick={swPage} />
          <TextBox ref={loginRef} label="logindsd" width={200} />
          <TextBox ref={passwdRef} label="passw" width={200} />
          <div style={{ display: 'flex', flexDirection: 'row', marginTop: 10 }}>
            <Button
              text="Send"
              onClick={loginClicked}
              disabled={loginInProcess}
              height={40}
              type="default"
            />
            <LoadIndicator visible={loginInProcess} />
          </div>
          <span>
            {axiosError && (
              <div style={{ width: '100%' }}>
                <span style={{ color: 'red' }}>Error!</span>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  {axiosError.stack}
                  <Button
                    text={moreButtonText}
                    onClick={moreErrClicked}
                    width={160}
                  />
                </div>
                {moreErr && (
                  <pre>{JSON.stringify(axiosError, undefined, 2)}</pre>
                )}
              </div>
            )}

            {response && (
              <div style={{ width: '100%' }}>
                <span style={{ color: 'green' }}>OK!</span>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <pre>{JSON.stringify(response.data, undefined, 2)}</pre>
                  <Button
                    text={moreButtonText}
                    onClick={moreErrClicked}
                    width={160}
                  />
                  {moreErr && (
                    <pre>{JSON.stringify(response, undefined, 2)}</pre>
                  )}
                </div>
              </div>
            )}
          </span>
        </>
      )}
    </div>
  );
}

export default App;

api.js
import axios from "axios";
import { apiUrl } from "./consts";

export default class ADAPIAuth {
  static async getTokenInfo() {
    return await axios.get(`${apiUrl}/token_info`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });
  }
    static async postLogin(login, password) {
    const params = new URLSearchParams();
    params.append("username", login);
    params.append("password", password);
    return await axios.post(`${apiUrl}/login`, params, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
  }
}

useFetching.js
import {useState} from "react";

export const useFetching = (callback) => {
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    const fetching = async (...args) => {
        try {
            setIsLoading(true);
            await callback(...args);
        }
        catch (err) {
            setError(err);
        }
        finally {
            setIsLoading(false);
        }
    };

    return [fetching, isLoading, error];
};