Testing a component with two fetch calls? - next.js

Question

I'm using next js 13 along with Jest and react-testing-library for testing. I have a page with a form that i'm trying to test. I'm using react-hook-form.
export default function FormPage() {
const [isSuccess, setIsSuccess] = useState()
const submitForm: SubmitHandler<T> = async (data) => {
// call an api route here to send data to db
if (response.status == 200) setIsSuccess(true)
else setIsSuccess(false)
}
return (
<>
<form onSubmit={handleSubmit(submitForm)}>
// inputs here
</form>
{isSuccess ? <SuccessAlert /> : <Error />}
</>
)
}
I want to check if the success alert appears after the form is successfully submitted. I could mock the global.fetch but my problem is that there are two fetch happening in this page. A location input is also making fetch calls to give location suggestions to the user as they type. So when I mock global.fetch for the location input, it appears that it's also replacing the fetch call inside the submitForm function, hence, submitting the form doesn't really do anything.
Here's how I mocked the global.fetch for the location input:
describe("Form" , () => {
beforeEach(() => {
render(<FormPage/>)
global.fetch = jest.fn(() =>
Promise.resolve({
status: () => 200,
json: () =>
Promise.resolve({
data: { suggestions: SAMPLE_LOCATION_SUGGESTIONS },
}),
})
) as jest.Mock;
})
it("should show success alert after successfully submitting form", async () => {
await act(() => // fill up the form)
fireEvent.click(Submitbutton)
expect(scree.getByTestId("success-alert")).toBeInThisDocument()
})
})
Running screen.debug() just before the assertion shows that there are no errors appearing upon submission so the form is already valid. But it appears that calling the api for form submission does not happen at all. I'm guessing it's because of my initial mocking of fetch in beforeEach(). But i'm not sure how should should I mock 2 fetch inside a component.