mocking get api using axios mock adopter for api testing is throwing response in 400

Question

I am writing a test to mock a get api request with parameters. Even though I'm mocking for successful api response with 200 status the test suit is failing throwing the response in 404. I couldn't figure out what's wrong in my test suit. I'm receiving following here,

screenshot of error

this is my mock test for get api. Can someone tell me what's going wrong here.

let axiosMock: MockAdapter;
axiosMock = new MockAdapter(instance)
axiosMock
     .onGet('http://localhost:8000/api/v1/patients', {
         params: {
        page: 1,
        sort: 'workspace_patient_id',
        order: 'desc',
        },
    })
     .reply(200, mockResponse);

Here is my actual api in react component

setFetching(true);
        const response = await getAllPatients(
            paginationModel.page,
            search,
            dataSortModel[0].sort === 'asc' ? 'asc' : 'desc',
            dataSortModel[0].field === 'name' ? 'name' : 'workspace_patient_id',
        );

        if (response.status >= 400 && response.status < 500) {
            console.log(response.status);
            snackbar(response.data.description, 'error');
            return;
        }

        if (response.status >= 500) {
            snackbar('Something went wrong. Please try again.', 'error');
            return;
        }

        if (response.status === 200) {
            console.log('response', response.data);
            const pagedData: IPatientsPaged = response.data;
            const patients: IPatient[] = pagedData.results;
            console.log('patients', patients);

            setMetadata(pagedData.info);
            setRows(
                patients.map((patient) => ({
                    id: patient.id,
                    workspace_patient_id: patient.workspace_patient_id,
                    name: `${patient.first_name} ${patient.last_name}`,
                    contact: patient.contact_number,
                    address: patient.address,
                    email: patient.email,
                    action: () => <></>,
                })),
            );
        }

        setFetching(false);

The api is working correctly in react component and rendering all the UI components properly with successful api response. I tried changing await implementation in test suit but it didn't work at all.