Incompatibility with react

[plushugh]

I have been trying to add syntax highlighting in next.js with next-mdx-remote and rehype-shiki
This is my code:

const mdxSource = await serialize(content, {
    mdxOptions: {
      rehypePlugins: [
        [rehypeShiki, { theme: "nord" }],
      ],
    },
    scope: data,
  });

And the page:

<MDXRemote {...source} components={components} />

But I get this error when I first load the page:

And it loads correctly when I refresh.
It seems like there's an error with the pre element
I think rehype-shiki will add strings directly to the style attribute which is unsupported in react.
What should I do to convert them to {color: ""}?