Display data based on response code from server after loader is loader is completed inside JSX?

I’m using react and redux-toolkit to call the backend API. I have create initial state like

     const initialState = {
        sessionInfo: {},
        loading: false
     };

    export const validateSession = createAsyncThunk(
    'merchant/validate',
    async (params, {dispatch}) => {
       const data = {
            type : "",
            source : "",
        }
       const res = await SessionValidate.validateSession(data)
       if(res.status === 200) {
        return res.data
       }
    }
)

const sessionValidation = createSlice({
    name:"sessionValidation",
    initialState,
    extraReducers: {
        [validateSession.fulfilled]: (state, { payload }) => {
            state.sessionInfo = payload
            state.loading = false
        },
        [validateSession.pending]: (state, { paylaod }) => {
            state.loading = true
        },
        [validateSession.rejected]: (state, { paylaod }) => {
            state.loading = false
        }
    } 
})

Now, I fetch the store data from one of the react component to display the loader and data.

I already written working JSX code for my desired output.

NOW THE PROBLEM STATEMENT

Redux-tookit’s extrareducers have this lifecycle of fulfilled, reject , pending. Now, on pending state the loader state becomes TRUE. That point the loader component needs to fireup inside JSX.
Later, request got fulfilled and response is saved inside sessionInfo object and loader becomes false.

Now my designed output should be.
Show loader on api startup and once api request is completed, remove loader from jsx and check the code inside response object and display content accordingly.

Everthing works fine, can i refactor the below JSX to properly maintain code.

 export default function HomePage() {
  
  const dispatch = useDispatch();
  const { sessionInfo, loading } = useSelector(state => state.session)
  
  const nextPath = (path) => {
    this.props.history.push(path);
  };
  
  React.useEffect(() => {
     dispatch(validateSession())
  }, [])
  
  const sessionValidation = (
    <>
      { loading ? 
        <Box textAlign="center" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> 
          <CircularProgress size={25} sx={{ mr: 2 }} />
          <Typography variant="h4">Validating session.. please wait</Typography>
        </Box> : 
         <Box textAlign="center" sx={{ justifyContent: 'center', alignItems: 'center' }}> 
         { sessionInfo && sessionInfo.code === 403 ? 
          <>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <ErrorIcon fontSize="large" sx={{ mr: 1 }} color="error" />
              <Typography variant="h4">{"SESSION EXPIRED" }</Typography>
             </div>
             <Typography sx={{ textAlign: "center", mt: 2 }}>
              <Button component={Link} to = "/home" variant="contained" color="primary">
                Go back
             </Button>
             </Typography>
          </>
         : 
         <>
             <div>
             <CheckCircleIcon sx={{ mr: 1 }} color="success" />
             <Typography>{"SESSION VALIDATION SUCCEEDED" }</Typography>
             </div>
             <Typography sx={{ textAlign: "center", mt: 2 }}>
              <Link to = "/home">Get Started</Link>
              <Button component={Link} to = "/home" variant="contained" color="primary">
                Get Started
             </Button>
             </Typography>
         </>
         }
       </Box>
      }
    </>
  )
     
  return (
    <Container maxWidth="sm" sx={{ mt: 4 }}>
      <Paper elevation={1} sx={{ py: 4, borderTop: "4px solid #F76E40" }}>
         { sessionValidation }
      </Paper>
    </Container>
  );
}