Detect when Dropdown is open or closed

[Rambolink94]

Perhaps there is an obvious solution to this, but I need to be able to detect when the Flowbite Dropdown opens and closes from its parent component. When opened, I need to call an api endpoint and update the state of one of it's items, but only when opened. The reason for this is I have dozen's of these dropdowns present on the page at once and running these update functions all at once is detrimental to the performance.

Here's a minimal example component. Populate would be an async call to the backend. This works, and does what I want, but this runs for every item for every RowOptions component rendered on the screen. This is a lot of processing. I want this to happen lazily only for the items in the open dropdown.

export default function RowOptions() {
  return (
    <>
      <Dropdown>
        <Dropdown.Header>Actions</Dropdown.Header>
        {items.map(item => (
          <Dropdown.Item>{populate()}</Dropdown.Item>
        ))}
      </Dropdown>
    </>
  )
}

I'd hoped it would have an onOpen or onClose property I could hook to, but alas, it does not. Is there a wrapper I can use to get this functionality? I tried using a ref to track when it's visible, but that seemed to always be null (this could be my inexperience showing). I combined this with a state that would update when the dropdown was clicked, but this failed if the dropdown was closed by clicking an item or clicking off of the dropdown.

I'd appreciate the help, thanks!