There is a page that displays a list and a toggle button

<ServerComp>
  <ClientBtn/>
  <ServerList/>
</ServerComp>

When clicking on ClientBtn, it’s necessary to collapse ServerList, which should be rendered on the server. Essentially, the task is to add/remove a class to the list component. However, we cannot use ref or forwardedRef in server components and pass them to client components.

So far, my only idea is to add the class using standard JS methods, obtaining the DOM node of the list rendered on the server, through querySelectors.

As far as I know, this is an anti-pattern in React, so I am hesitant. Can you suggest alternative methods to solve this problem, or is this the only way?

And I understand that manipulating the part that statically comes from the server through JS is not as critical because these components do not have a state.
Please correct me if I am wrong.
Thank you in advance.