unable to Mock third party hook function in react

Question

in react component, I want to show toast message from @fluentui/react-components. Below is a simplified version of the code.

import {
  Toaster,
  useToastController,
} from '@fluentui/react-components';

  const { dispatchToast } = useToastController();

      dispatchToast(
        <Toast>
          <ToastTitle>Failed to get Departments</ToastTitle>
        </Toast>,
        { intent: 'error' },
      );

<Toaster toasterId={toasterId} data-testid="toaster" />

I want to mock "dispatchToast", so I want to sure if the method is called or not. I tried with

    const mockedfn = jest.fn();
    jest.mock('@fluentui/react-components', () => ({
       useToastController: () => ({
         dispatchToast: mockedfn,
       }),
    }));

also try with

     jest.spyOn(useToastController, 'dismissToast');
       .mockImplementation(() => mockedfn);

expect(mockedfn).toHaveBeenCalled();

But every time, the mocked function failed to create or the mocked function never called. From documention I found that the type structure of the useToastController hook is same as below

export declare function useToastController(toasterId?: ToasterId): {
    dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions) => void;
    dismissToast: (toastId: ToastId) => void;
    dismissAllToasts: () => void;
    updateToast: (options: UpdateToastOptions) => void;
    pauseToast: (toastId: ToastId) => void;
    playToast: (toastId: ToastId) => void;
};