Error <pre> cannot be a descendant of <p>

[jb-dev1]

After a few back and forths using the code editor (starting with the default prompt "Write code to demonstrate djikstra's algorithm", these two errors received (below). This was while OpenAI gpt-4o was streaming back a response. It didn't save so I don't know part that caused the error.

I was, importantly, having it update Python code over and over, so there may be a char sequence sent by the LLM it didn't like.

First Error

Console Error

In HTML, <pre> cannot be a descendant of <p>.
This will cause a hydration error.

  ...
    <PurePreviewMessage chatId="c72a0982-7..." message={{id:"8sQ6kc...", ...}} isLoading={true} vote={undefined} ...>
      <AnimatePresence>
        <PresenceChild isPresent={true} initial={undefined} custom={undefined} presenceAffectsLayout={true} mode="sync" ...>
          <MotionComponent className="w-full mx-..." initial={{y:5,opacity:0}} animate={{y:0,opacity:1}} ...>
            <div className="w-full mx-..." data-role="assistant" style={{opacity:0, ...}} ref={function}>
              <div className="flex gap-4...">
                <div>
                <div className="flex flex-...">
                  <div className="flex flex-...">
                    <div className="flex flex-...">
                      <NonMemoizedMarkdown>
                        <Markdown remarkPlugins={[...]} components={{...}}>
>                         <p>
                            <CodeBlock node={{type:"element", ...}}>
                              <div className="not-prose ...">
>                               <pre
>                                 className="text-sm w-full overflow-x-auto dark:bg-zinc-900 p-4 border border-zinc-20..."
>                               >
                            ...
                  ...

      <div className="not-prose flex flex-col">
        {tab === 'code' && (
          <pre
            {...props}
            className={`text-sm w-full overflow-x-auto dark:bg-zinc-900 p-4 border border-zinc-200 dark:border-zinc-700 rounded-xl dark:text-zinc-50 text-zinc-900`}
          >

Second Error

Console Error

<p> cannot contain a nested <pre>.
See this log for the ancestor stack trace.

const NonMemoizedMarkdown = ({ children }: { children: string }) => {
  return (
    <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
      {children}
    </ReactMarkdown>
  );
};