Hi, Im adding bearer token and heent id to axios header which coming as a prop into the client component.

'use client';

interface RequestInterceptorProps {
  readonly children: React.ReactNode;
  session: Session;
}
export default function RequestInterceptor({
  children,
  session,
}: Readonly<RequestInterceptorProps>) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const requestInterceptor = instance.interceptors.request.use(
      async config => {
        if (!session?.user) {
          throw Error('No active session found');
        }

        const bearer = `Bearer ${session.user.azureToken}`;
        config.headers.Authorization = bearer;
        config.headers['x-tenant-id'] = session.user.tenantId;

        return config;
      },
      error => {
        console.error('Request Error:', error);
        return Promise.reject(error);
      },
    );

    const responseInterceptor = instance.interceptors.response.use(
      async response => {
        return response;
      },
      async error => {
        if (error instanceof AxiosError) {
          if (error.response?.status === 401) {
            if (
              error.response?.data.errorCode === 'TENANT_NOT_FOUND' ||
              error.response?.data.errorCode === 'USER_NOT_AUTHORIZED'
            ) {
              setVisible(true);
            } else {
              toast.error(error.response?.data.message);
              await signOut();
            }        
        }
        return Promise.reject(error);
      },
    );

    return () => {
      instance.interceptors.request.eject(requestInterceptor);
      instance.interceptors.response.eject(responseInterceptor);
    };
  }, [session.user.azureToken]);

  return (
    <>
      {children}
  
    </>
  );
}

this useeffect throw 404 error, I could not find a way to fix that.