How to handle Promise in custom react useEffect

Question

I have two components which i am working with. In the first component, i made a custom useEffect hook that retrieves data from my server. Please see the code below:

Code snippet One

import {useState, useCallback} from 'react';
import {stageQuizApi} from '../api/quiz';
import {QuestionService} from "../services/IdDbServices/question_service";


const usePostData = ({url, payload, config}) => {
    const [res, setRes] = useState({data: null, error: null, isLoading: false});


    const callAPI = useCallback(() => {
         setRes(prevState => ({...prevState, isLoading: true}));
         stageQuizApi.patch(url, payload, config).then( res => {
          setRes({data: res.data, isLoading: false, error: null});
          const questionInDb = {};

              const {NoTimePerQuestion,anwser, question, playerDetails, option} = res.data.data;
              const {playerid,anwserRatio, name} = playerDetails
              questionInDb.timePerQuestion = NoTimePerQuestion;
              questionInDb.anwserRatio = anwserRatio;
              questionInDb.options = option;
              questionInDb.answer = anwser;
              questionInDb.playerId = playerid;
              questionInDb.name = name;
              questionInDb.question = question;
              const Service = new QuestionService();
              Service.addStudent(questionInDb).
            then(response=>console.log(response))
            .catch(err=>console.log(err));

         }).catch((error) => {
           console.log(error)
            if (error.response) {
               const errorJson = error.response.data
               setRes({data: null, isLoading: false, error: errorJson.message});
             } else if (error.request) {
               setRes({data: null, isLoading: false, eror: error.request});
             } else {
               setRes({data: null, isLoading: false, error: error.message});
             }
         })
    }, [url, config, payload])
    return [res, callAPI];
}

export default usePostData;

The above module has two purpose. It first makes an axios request to my endpoint and secondly makes a database insertion to browser IndexDb (similar to localstorage but with sql approach) ( like inserting data into the database using the response that was gotten from the first request. so typically i have a promise in the outer .then block. This part:

Code snippet Two

const questionInDb = {};

              const {NoTimePerQuestion,anwser, question, playerDetails, option} = res.data.data;
              const {playerid,anwserRatio, name} = playerDetails
              questionInDb.timePerQuestion = NoTimePerQuestion;
              questionInDb.anwserRatio = anwserRatio;
              questionInDb.options = option;
              questionInDb.answer = anwser;
              questionInDb.playerId = playerid;
              questionInDb.name = name;
              questionInDb.question = question;
              const Service = new QuestionService();
              Service.addStudent(questionInDb).
            then(response=>console.log(response))
            .catch(err=>console.log(err));

Here is the problem, I am trying to maintain state as i want the result of this module to be shared in another route and i don't want to hit the server again hence i inserted the result into indexDb browser storage. Here is the code that executes the above module:

Code snippet Three

const displaySingleQuestion = ()=>{
    OnUserGetQuestion();
      history.push('/player/question');
  }

The above method is called from my first route /question and it is expected to redirect user to the /player/question when the displaySingleQuestion is called.

On the new route /player/question i then want to fetch the data from IndexDb and update the state of that component using the useEffect code below:

Code snippet Four

useEffect(()=>{
      const getAllUserFromIndexDb = async()=>{
        try{

          const result = await new Promise((resolve, reject) => {
            service.getStudents().then(res=>resolve(res)).catch(err=>reject(err))
          });


          console.log('it did not get to the point i was expecting',result)

          if(result[0]){
            console.log('it got to the point i was expecting')
            const singleQuestion = result[0];
            const questionPage = playerQuestionToDisplay;
            questionPage.name = singleQuestion.name;
            questionPage.anwserRatio = singleQuestion.anwserRatio;
            questionPage.answer = singleQuestion.answer;
            questionPage.options = singleQuestion.options;
            questionPage.playerId = singleQuestion.playerId;
            questionPage.question = singleQuestion.question;
            questionPage.timePerQuestion = singleQuestion.timePerQuestion;
           return setplayerQuestionToDisplay({playerQuestionToDisplay:questionPage})
          }
        }
        catch(error){
          console.log(error)
        }


      }

      getAllUserFromIndexDb();

      return function cleanup() {
        setplayerQuestionToDisplay({playerQuestionToDisplay:{}})
      }

    },[history.location.pathname]);

The problem is that only one Button click (Code snippet three)(displaySingleQuestion()) triggers the whole functionality and redirect to the /player/question page but in this new route the state is not been set until a page reload as occurred, i tried debugging the problem and i found out that when the button is clicked i found out that Code snippet two is executed last hence when Code snippet Four ran it was in promise and until a page reloads occurs the state of the component is undefined

Thanks for reading, Please i would appreciate any help in resolving this issue.