Axios helper file with interceptors, how to turn it into a context provider?

import axios from 'axios';
import { useMsal} from '@azure/msal-react';

const serverURL =
    import.meta.env.MODE === 'development'
        ? 'http://localhost'
        : import.meta.env.VITE_BASE_URL;

const middlePart = import.meta.env.VITE_API_PATH;

const axiosInstance = axios.create(
    {baseURL:serverURL + middlePart + '/'}
);

const { instance } = useMsal();  // <-- here is the culprit hook
const tokenRequest = {
    account: instance.getActiveAccount(), // This is an example - Select account based on your app's requirements
    scopes: [import.meta.env.VITE_QUOTES_API_SCOPE]
};