TOC items don't show words when they come from components

[plocket]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The table of contents menu seems to ignore the text of components, though the regular text nodes of the same heading are visible.

There is probably an issue for this already, but I couldn't find it.

Reproducible demo

https://codesandbox.io/p/devbox/reverent-hamilton-m5y9nl

Steps to reproduce

1. Make a component
2. Import it
3. Use it in a heading
4. See that the text is visible in the heading
5. Check the table of contents and see that the component's text is not there

Expected behavior

I thought the text of the component that is in the heading would be visible in the table of contents.

Actual behavior

The text of the component is missing from the table of contents, though the other text in the heading is visible.

Your environment

• Public source code: https://codesandbox.io/p/devbox/reverent-hamilton-m5y9nl
• Public site URL: https://codesandbox.io/p/devbox/reverent-hamilton-m5y9nl
• Docusaurus version used: 3.2.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 123.0.6312.87, devbox
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): OSX 12.6.6

Self-service

• I'd be willing to fix this bug myself.

[Abdullah-03]

Similar to #10018. TOC does not handle JSX.

[Josh-Cena]

Calling it a duplicate of #9772