Error: Hydration failed because the initial UI does not match what was rendered on the server.

Hi, I'm setting this library up for the first time and I'm looking forward to using it but at the moment, I keep getting this error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

To test it out, I've created an all new next js projected a few times now, thinking there's something I'm missing. I've pasted the sample code from the docs into pages/index.tsx but I'm still seeing the error. The only other component in the tree at this point is pages/_app.tsx and I've left that untouched. I imagine I must be missing something pretty basic but the site renders just fine if I remove <MDXRemote /> 🤷

import { serialize } from 'next-mdx-remote/serialize';
import { MDXRemote } from 'next-mdx-remote';

function Test() {
  return <div>Test component</div>;
}

const components = { Test };

export default function TestPage({ source }) {
  return (
    <div className='wrapper'>
      <MDXRemote {...source} components={components} />
    </div>
  );
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component <Test />';
  const mdxSource = await serialize(source);
  return { props: { source: mdxSource } };
}

My dependencies:

    "next": "12.3.1",
    "next-mdx-remote": "^4.1.0",
    "react": "18.2.0",

hashicorp / next-mdx-remote

Error: Hydration failed because the initial UI does not match what was rendered on the server. #305