Using App Router
So I have a page, say /about/page.js that I am intending to keep without using use client, but I also have a portion of the page that needs to have some JS happening with, roughly this:

<Section>

<Topic>Legacy</Topic>
<Statement>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
  quae ab illo inventore veritatis et quasi architecto beatae vitae
  dicta sunt explicabo.
</Statement>

<Topic>Organization</Topic>
<Statement>
  At vero eos et accusamus et iusto odio dignissimos ducimus qui
  blanditiis praesentium voluptatum deleniti atque corrupti quos
  dolores et quas molestias excepturi sint occaecati cupiditate
  non provident, similique sunt in culpa qui officia deserunt
  mollitia animi, id est laborum et dolorum fuga.
</Statement>

</Section>

I need to reference each of the children components from Section, that looks like this:

"use client"

export default function Section({ children }) {
  // const topics = 
  // const statements = 

  const [current, setCurrent] = useState(0)
  console.log(topics[current].current)        // I need to treference these elements, so
  console.log(statements [current].current)   // I could toggle some classes on them

  return <>{children}</>
}

Whats is the approach or am I doing it the wrong way?