Mi aplicación está construida usando NextJs con Typescript y usando la biblioteca react-bootstrap para componentes. Sigo recibiendo un error que dice When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.

Traté de incluir el SSRProvider que viene con react-bootstrap, pero parece que no funciona sin importar dónde lo coloque en mi archivo _app.tsx . ¿Alguien sabe como resolver esto? Mi interfaz de usuario sigue fallando al recargar la página.

 import type { NextComponentType } from 'next'; import { AppContext, AppInitialProps, AppLayoutProps } from 'next/app'; import { ReactNode } from 'react'; import { ThemeProvider } from 'styled-components'; import theme from '../styles/theme'; import { SSRProvider } from 'react-bootstrap'; const MyApp: NextComponentType<AppContext, AppInitialProps, AppLayoutProps> = ({ Component, pageProps, }: AppLayoutProps) => { const getLayout = Component.getLayout || ((page: ReactNode) => page); return ( getLayout( <SSRProvider> <ThemeProvider theme={theme}> <Component {...pageProps} /> </ThemeProvider> </SSRProvider> ) ) } export default MyApp;