Cannot make mocked useNavigate Work in a React, Redux, Redux-Tool-Kit application using Vitest

I build an App with Vite, React, Redux, Redux-Tool-Kit and Javascript that also involves routing and Vitest for testing.

I have to build a mock of the useNavigate hook but I cannot make it work. This is what I build:

import React from 'react';
import { renderWithProviders } from '../../../../tests_setup/test-utils';
import { screen, fireEvent  } from '@testing-library/dom';
import { useNavigate } from 'react-router-dom';
import SearchInput from '../SearchInput';
import {
  resetSearch,
  updateSearchterm,
  getData
} from '../../../features/data/dataSlice';

// Mock the useNavigate function from react-router-dom
const mockUseNavigate = vi.fn();

vi.mock('react-router-dom', async () => {
    const nav = await vi.importActual<typeof import("react-router-dom")>(
      "react-router-dom"
    );
    return {
        ...nav,
        useNavigate: () => mockUseNavigate,
    };
}); 

This is my test-utils.jsx file:

import React from 'react'
import { render } from '@testing-library/react'
import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom';
import { setupStore } from '../src/app/store'

export function renderWithProviders(
  ui,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = setupStore(preloadedState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return (
      <Provider store={store}>
        <Router>
          {children}
        </Router>
      </Provider>
    )
  }
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) }
};

I am getting the following error-message from Vitest:

Error: [vitest] No "BrowserRouter" export is defined on the "react-router-dom" mock. Did you forget to return it from "vi.mock"? If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock("react-router-dom", async (importOriginal) => { const actual = await importOriginal() return { ...actual, // your mocked methods } })

❯ Wrapper tests_setup/test-utils.jsx:30:14 28| return ( 29| 30| | ^ 31| {children} 32| ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7

I could not find a solution.

Can anyone please help? The whole testing topic is still quite confusing to me, so I would also be very happy about some explanations to get a better understanding.