react js axios interceptions

Question

when i use bellow component as a hook and called hook from multiple components interceptor handler grove. when auth token get expired interceptor called too many times and made refresh token request how can i solve this issue

import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom';
import useAuth from './useAuth'; import axios, { axiosPrivate } from '../api/axios';
import { FORBIDDEN } from '../util/util'
    
    function useAxiosPrivate() {
        const { auth, setAuth } = useAuth();
        const navigate = useNavigate();
        const getRefreshToken = () => {        
            return new Promise((resolve, reject) => {
                axios.post('/api/User/RefreshToken', {refreshToken : auth.refreshToken}, {
                    'Content-Type' : 'application/json'
                })
                .then(resp =>  resolve(resp))
                .catch(err => reject(err))
            })        
        }
    
        useEffect(() => {
            console.log(axiosPrivate.interceptors.request)
            const privateApi = axiosPrivate.interceptors.request.use(async request => {
                try {
                    if((auth.tokenExpireDate * 1000) <= Date.now()) {
                        let resp = await getRefreshToken();
                        request.headers.Authorization = 'Bearer ' +  resp.data.result.token;                
                        setAuth({
                            ...auth,
                            refreshToken : resp.data.result.refreshToken,
                            token : resp.data.result.token,
                            tokenExpireDate : resp.data.result.tokenExpireDate
                        });
                    }
                                   
                    if(auth?.token && (auth.tokenExpireDate * 1000) > Date.now()){
                        request.headers.Authorization = 'Bearer ' + auth.token;
                    }                
                    return Promise.resolve(request);
                }catch(ex){
                    
                    request.headers.Authorization = 'Bearer ' + auth.token;
                    return Promise.resolve(request);
                    
                }            
            }, error => {
                navigate(FORBIDDEN, {replace: true})
            })
    
            console.log("use effect", privateApi);
            return () => {                    
                axiosPrivate.interceptors.request.eject(privateApi);
            }
        }, [auth]);    
        return axiosPrivate;
     }
    export default useAxiosPrivate;