Document Outline: Exception caused by headings with formatting

[noisysocks]

Describe the bug
A heading with rich text formatting causes the Document Outline to throw an exception.

To Reproduce

1. Go to the Gutenberg Demo post
2. Click on the Content Structure button (the i icon in the upper left)

or

1. Create a new post
2. Insert a heading block
3. Type some text
4. Make some of the text bold
5. Click on the Content Structure button (the i icon in the upper left)

An exception is thrown:

Uncaught Error: Objects are not valid as a React child (found: object with keys {type, props}). If you meant to render a collection of children, use an array instead.
    in span (created by TableOfContentsItem)
    in button (created by TableOfContentsItem)
    in li (created by TableOfContentsItem)
    in TableOfContentsItem (created by DocumentOutline)

Expected behavior
The document outline should be shown.

Additional context
In #7934, we changed how attributes with a source of children are serialised. We likely need to update DocumentOutline to respect this new object shape by e.g. using <RichText.Content>.

[designsimply]

Closed #8150 as a duplicate.