How to mock data response using msw and axios.create() instance

I want to do a mocking data fetching using msw. And I have an axios instance configuration with authorization in the header.

Here is my instance.ts

import axios from 'axios';

const BASE_URL = process.env.REACT_APP_BASE_URL;

const createInstance = () => {
  const instance = axios.create({
    baseURL: BASE_URL,
    headers: {
      'content-type': 'application/json',
      Accept: 'application/json',
    },
  });

  instance.interceptors.request.use(
    (config) => {
      const token = window.localStorage.getItem('token');
      if (token) {
        return {
          ...config,
          headers: { Authorization: `Bearer ${token}` },
        };
      }
      return null;
    },
    (err) => Promise.reject(err)
  );
  return instance;
};

export default createInstance();

Here is my handlers.js

export const handlers = [
  rest.get(BASE_URL, (req, res, ctx) => {
    return res(
      ctx.json(ctx.json({
        user: {
          images: [
            {
              url: 'Testing Image',
            },
          ],
          display_name: 'Kitty_Puff',
          country: 'ID',
          followers: {
            total: 2000,
          },
          external_urls: {
            spotify: 'No Url Here',
          },
        },
      })
    ));
  }),
]

And my profile.test.js:

test('Should render profile page properly', async () => {
  render(<Profile />);

  const name = await screen.findByText('Kitty_Puff');

  expect(name).toBeVisible();
});

I run the test but it return failed because there is no text "Kitty_Puff". I did screen.debug to see what it render, and it render everything except the data response. How could I do this mocking api call?