Hydration Error when Using a Separate React Component in Lexical RichText inlineBlocks

[Livog]

Describe the Bug

When I define an inline block by returning JSX directly, there’s no issue:

inlineBlocks: {
  // Works fine:
  AvatarGroup: ({ node }) => {
    const { avatars } = node.fields
    return <div>{avatars?.map((avatar, ix) => <div key={ix}></div>)}</div>
  }
}

But as soon as I move the same logic into a separate React component, I get a hydration error in the frontend:

inlineBlocks: {
  // Causes a hydration error:
  AvatarGroup: ({ node }) => {
    const { avatars } = node.fields
    return <AvatarGroup avatars={avatars} />
  }
}

Nothing else changes except encapsulating the markup in a dedicated component.

Link to the code that reproduces this issue

Livog/payload-3-inline-blocks-bug@5214c50

Reproduction Steps

1. In the Pages collection, go to the “Hero” tab and add an Avatar inline block.
2. Add data to the inline block.
3. Visit the frontend page and check the console — a hydration error appears only when the JSX is moved into its own component.

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical

Environment Info

Payload: 3.18
Next.js: 15.1.5
Node.js 20.11

[GermanJablo]

I get the error when I put it inline too, which is this:

Unhandled Runtime Error

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

[...]
...
  <div>
    <p>
    ^^^
      <div>

Which is expected. If you change the divs to spans it works.

For next time, please copy the full error you get so it's easier to help you

[Livog]

@GermanJablo I want to apologize for missing that detail. Thank you for your time and for helping me clarify it.

[GermanJablo]

No problem! 😁👍🏼