Get the immediate redux store state inside click event handler function

I have a search component, when an input is given to the input filed and the search button is pressed I want to get a response immediately, process it and redirect to another page,

I want to get the immediate state of the store after the dispatch event

this my hook to get store state and dispatch action

export function useSpIdCheckRedirect(): [ISPPerfSummaryCardsState, SpIdData] {
  const dispatch = useDispatch();

  return [
    useSelector<IAppstate, ISPPerfSummaryCardsState>(
      (state) => state.spPerfSummaryCardsState,
      shallowEqual
    ),
    {
      getSpIdData(spId: string, dataFilter: string) {
        dispatch(
          getDataStartSPPerfSummaryCardsAction({
            spId: spId,
            dateFilter: "LAST30DAYS",
          })
        );
      },
    },
  ];
}

this is my event handler function

const handleSPPerformanceClick = () => {
    dispatch(viewTopSPPerformancePage());
  };

  const HandleSPSearchClick = () => {


    getSpIdData(searchState, "LAST30DAYS");
    console.log(state);

    if (ref.current.isFetching == LoadingStatus.LOADING_SUCCESS) {
      console.log(state);
    }

  };

this is the place where the hook is used

function SPHighlights({ spData }: Props) {


  let [state, { getSpIdData }] = useSpIdCheckRedirect();
  

  const HandleSPSearchClick = () => {
    getSpIdData(searchState, "LAST30DAYS");
    console.log(state);

    if (state.isFetching == LoadingStatus.LOADING_SUCCESS) {
      console.log(state);
    }

  };}

but the condition check inside the click handler becomes true only in the second click.

I want to get the store update immediately in the click handler, how can I do it?

Furthermore, I have used redux-saga middleware too.