jest.doMock not calling mock function - reactjs

Question

This is my component to be tested.
// WelcomePgaeContainer.jsx
import React, { useEffect, useState } from "react";
import WelcomePage from "./WelcomePage";
import api from "../../../api";
import apiUrl from "../../../apiUrls";
import { Loader } from "../../../shared/components";
const WelComePageContainer = () => {
const [welcomeData, updateWelcomeData] = useState({});
useEffect(() => {
api.get(apiUrl.WELCOME_PAGE.GET_WELCOME_DATA).then(({ data }) => {
updateWelcomeData(data);
});
}, []);
return (
<div>
{Object.keys(welcomeData).length ? (
<WelcomePage />
) : (
<div data-testid="welcome-page-loader" className={styles.loaderContainer}>
<Loader size={5} />
</div>
)}
</div>
);
};
export default WelComePageContainer;
// api.js
import axios from "axios";
const api = axios.create();
api.defaults.headers.post["Content-Type"] = "application/json";
api.interceptors.request.use(
config => {
config.withCredentials = false;
return config;
},
error => Promise.reject(error)
);
api.interceptors.response.use(
response => response,
error => {
return Promise.reject(error.response);
}
);
export default API;
// Welcome.test.js
it("test welcome page is loaded and async data call is made once", async () => {
jest.doMock("../../src/api", () => {
const mock = new MockAdapter(axios);
mock.onGet(apiUrl.WELCOME_PAGE.GET_WELCOME_DATA).reply(200, WELCOME_DATA);
});
const history = createMemoryHistory();
const { findByTestId } = render(
<Router history={history}>
<WelComePageContainer />
</Router>
);
const welcomeViewElement = await findByTestId("welcome-data-container");
expect(welcomeViewElement).toBeTruthy();
});
I am trying to mock import api from "../../../api"; of WelcomePgaeContainer.jsx in my test file. However, when calling from Welcome.test.js the actual is getting invoked rather than the mocked one.