not able to mock router.push react-testing - **expect(jest.fn()).toHaveBeenCalledWith(...expected)**

Here I am trying to mock router.push but it doesn't seem to work, I tried different approach and still facing the same issue

here's the code of my component

   const onProceed = () => {
    setLoading(true);
      router.push({
        pathname: "../../links/[id]/config",
        query: { id: id, redirect_url: redirect_url, },
      });
   
  };


 <button onClick={onProceed} >
  {loading ? (<span className="spinner-border spinner-border-sm mr-1"></span>) : ( "Proceed")}
 </button>

And the testing code which I have written -

 it("proceed button should redirect", async () => {
    const router = createMockRouter({ query: {  id: "", redirect_url: "", key: ""} , pathname : 'consent'})

    render(
      <RouterContext.Provider value={router}>
        <WelcomeScreen {...propData} />
      </RouterContext.Provider>
    );
    const proceedButton = await screen.findByRole('button', { name: /Proceed/i });
    fireEvent.click(proceedButton);
    expect(router.push).toHaveBeenCalledWith("../../links/[id]/config");
  });

the error it shows is

**

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "../../links/[id]/config"

Number of calls: 0

  142 |     fireEvent.click(proceedButton);
  143 |     // render component
> 144 |     expect(router.push).toHaveBeenCalledWith("../../links/[id]/config");
      |                         ^
  145 |
  146 |     screen.debug();
  147 |   });

** I am new to react-testing and now am stuck and don't know where I am going wrong!!