doesn't work with nextjs

Latest version requires this depedancy to be installed: yarn add @remix-run/react

Once added I get errors of: Error: You must render this element inside a <Remix> element

Usage (next.s)

import 'react-toastify/dist/ReactToastify.css';
import '../styles/globals.css';
import '../styles/theme.css';
import '../styles/plates.css';
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
import { useDehydratedState } from 'use-dehydrated-state';
import { Layout } from '@features/ui';
import { QueryClient, QueryClientProvider, Hydrate } from 'react-query';
import dynamic from 'next/dynamic';
import appWithI18n from 'next-translate/appWithI18n';
import i18nConfig from '../i18n.json';
import { Toaster } from '@src/features/Toaster/components';

const HeaderDynamic = dynamic(
  () => import('@features/ui/Layout/components/Header'),
  {
    ssr: false,
  }
);

const ModalDynamic = dynamic(
  () => import('@src/features/Modal/components/Modal'),
  {
    ssr: false,
  }
);

const queryClient = new QueryClient();

const MyApp = ({ Component, pageProps }: AppProps) => {
  const dehydratedState = useDehydratedState();
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <ThemeProvider>
          <ModalDynamic />
          <Toaster />
          <Layout.Root>
            <HeaderDynamic />
            <Component {...pageProps}></Component>
          </Layout.Root>
        </ThemeProvider>
      </Hydrate>
    </QueryClientProvider>
  );
};

export default appWithI18n(MyApp as any, {
  ...i18nConfig,
  skipInitialProps: false,
});

maplegrove-io / use-dehydrated-state

doesn't work with nextjs #1