Rendering slides programmatically with React?

[phwebi]

I'm working on a project where I want to programmatically convert JSON data into a reveal.js presentation via react. So far, I'm able to successfully render something like:

<div ref={deckDivRef} className="reveal">
      <div className="slides">
      {sections.length > 0 ? (
          sections.map((s) => <section key={s.key}>{s.title}</section>)
        ) : (
          <section>Loading...</section> // Ensure at least one slide exists
        )}
      </div>
    </div>

But if I try to extract the slide into a separate (very basic) component like so:

const Section = ({ title }: SectionProps) => {
 return (
   <section>
     {title}
   </section>
 )
}

reveal.js breaks with the following error:

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Any ideas why?