How to create a table of contents from Strapi rich text field

I’ve searched everywhere for this but I could only find one article about it which was pretty vague.

So I’m rendering the rich text content using the BlocksRenderer component from Strapi itself. Is it possible to create a table of contents from the data gotten from strapi rich text?

This is my Blog component:

import { BlocksRenderer, type BlocksContent} from "@strapi/blocks-react-renderer";

const Blog = () => {

  const { data } = useGetBlogsByIdQuery(slug);

  const content: BlocksContent = data ? .data ? .attributes ? .content;

  return ( 
    <BlocksRenderer content = {content} />
  )
}

This is how the blog post is rendered. If I can map out the headings of each section of the content below the 'on this page' text

This is what the content data looks like

I would appreciate any tips