Warning: useLayoutEffect does nothing on the server with code-hike

[TangSirOnGit]

Hi:
I want to do sth with the mdx content before render it. so I read the mdx content by renderToString from react-dom/server. but I encountered a warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at CodeSpring (webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:2425:11)
    at div
    at InnerCode (webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:3445:11)
    at Code (webpack-internal:///./node_modules/@code-hike/mdx/dist/components.esm.mjs:3424:64)
    at _createMdxContent (webpack-internal:///./pages/posts/codehike-sample/index.mdx:852:71)

The simplest example:

mdx file:

import MDXContentLayout from "./mdxLayout";

just text here

```javascript
const sample= 'sample'
```
export default ({ children }) => <MDXContentLayout>{children}</MDXContentLayout>

and the mdxLayout.jsx:

import { MDXProvider } from '@mdx-js/react';

import { renderToString } from 'react-dom/server';

const MDXContentLayout = ({ children }) => {
    //I want to do sth with mdx content here. if I comment out this line , there will be no warning.
  const contentString = renderToString(children);

  return <MDXProvider>{children}</MDXProvider>;
};

export default MDXContentLayout;

if I remove the code content in Mdx file, or comment out the const contentString = renderToString(children); in mdxLayout.jsx, the warning will disapear.

next.config.js:

const theme = require('shiki/themes/material-default.json');
const { remarkCodeHike } = require('@code-hike/mdx');

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [[remarkCodeHike, { theme, showCopyButton: true }]],
    providerImportSource: '@mdx-js/react',
  },
});

module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
});

code-hike version:

"@code-hike/mdx": "^0.8.0",