NextJS: как правильно сделать обработку 401?

У меня есть проект на NextJS, в котором есть авторизация. В файле pages/_app.js у меня есть глобальные настройки axios

axios.defaults.baseURL = process.env.API_URL;
axios.defaults.withCredentials = true;
axios.defaults.headers.post['Content-Type'] = 'application/json';

И отлавливание 401 ошибки

axios.interceptors.response.use(undefined, async (error) => {
    const status = error.response ? error.response.status : false;
    const dispatch = useDispatch()
    const router = useRouter()
    if (error.config.url === '/auth/refresh-token') {
        dispatch(logout())
        await router.push('/' + router.locale)
    }

    if (status === 401) {
        await axios.post('/auth/refresh-token')
            .then(result => {
                axios.defaults.headers.common['Authorization'] = 'Bearer ' + result.data.token;
            })
            .catch(error => {
                dispatch(logout())
                router.push('/' + router.locale)
            })
    }
    return Promise.reject(error);
});

Проблема в том, что код не работает, так как я не могу тут вызывать хуки. А как я могу сделать без хуков?

P.S. В ReactJS, тем более в NextJS, я новичек, прошу прощения если задачи элементарная.