`documentToReactComponents` generating incorrect HTML attributes with custom render options

[pjaws]

In our blog articles, we are generating a table of contents with anchor links by generating HTML ids for each h2 and passing in a custom renderer for BLOCKS.HEADING_2.

This works pretty well in most cases, but in at least one, we're seeing some weird behavior with duplicate/incorrect ids being rendered. I'm 100% positive we're passing in the correct input to documentToReactComponents, which you can see in these logs:

However, this is the output we're getting:

As you can see, the span with id="Criterion_2_Fees" is repeated, and then the fourth block has the id the third should have had.

For reference, here is the custom renderer we're passing in (with the log statements included):

const renderOptions = {
  renderNode: {
    [BLOCKS.HEADING_2]: (node, children) => {
      console.log(
        'assigning this id:',
        generateHtmlIdFromContent(node.content[0]?.value)
      );
      console.log('to this heading', children);
      return (
        <>
          <Anchor id={generateHtmlIdFromContent(node.content[0]?.value)} />
          <BodyHeading as="h2">
            {children}
          </BodyHeading>
        </>
      );
    },
    [BLOCKS.PARAGRAPH]: (node, children) => <StyledText mt={3}>{children}</StyledText>,
  },
};

You can see a live example of this happening here.

Let me know if I can provide any additional detail!