Error: Uncaught [Error: `useI18n` must be used inside `I18nProvider`]

Hello, thank you for this awesome library I’m using this package with Jest and it doesn’t seems to work properly

this is my customRender.tsx

import en from 'locales/en';
import { ThemeProvider } from '@mui/material';
import { theme } from 'styles/theme';
import { render, cleanup } from '@testing-library/react';
import { createI18n } from 'next-international';

// I tried different methods to mock next/router
// 1. first attempt
const useRouter = jest.spyOn(require('next/router'), 'useRouter');
useRouter.mockImplementationOnce(() => ({
    locale: 'en',
    defaultLocale: 'en',
    locales: ['en', 'fr'],
}));

// 2. second attempt
jest.mock('next/router', () => ({
  useRouter: () => ({
    locale: 'en',
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  }),
}));

afterEach(() => {
    cleanup()
})

const { I18nProvider } = createI18n<typeof en>({
    en: () => import('locales/en'),
    fr: () => import('locales/fr'),
})

const Providers = ({ children }: { children: any }) => {
    return <I18nProvider locale={en}><ThemeProvider theme={theme}>{children}</ThemeProvider></I18nProvider>
};
const customRender = (ui: any, options = {}) => render(ui, { wrapper: Providers, ...options });
export * from '@testing-library/react';
export { default as userEvent } from '@testing-library/user-event'
export { customRender as render };

I have a component where I use i18n and the test fail all the time

import { cleanup, fireEvent } from '@testing-library/react';
import { render, screen } from 'testing/customRender'

import React from 'react';
import InputField from '.';

afterEach(cleanup);

describe('<InputField />', () => {
    it('handleChange function called', () => {
        const spy = jest.fn();
        render(<InputField field={{ name: 'text', onChange: spy }} label="nom" />);
        let input = screen.getByLabelText('nom') as HTMLInputElement;
        expect(input.value).toBe('');

        fireEvent.change(input, { target: { value: '23' } });
        fireEvent.blur(input, { target: { value: '23' } });
        expect(spy).toHaveBeenCalledTimes(1);
    });
});

// locales.ts
import { createI18n } from 'next-international';
import type Locale from './en';
export const { useI18n, I18nProvider, useChangeLocale, defineLocale, getLocaleProps } = createI18n<typeof Locale>({
  en: () => import('./en'),
  fr: () => import('./fr'),
});

Inside my component I import the hook use18n() from locales const { t } = useI18n();

When I run my tests I get the following error

TypeError: Cannot destructure property 'locale' of '(0 , B.useRouter)(...)' as it is null.

Can you please provide an example with jest? a wrapper and how to use it inside a component that uses i18n

Thank you so much