Second tooltip inside popover always triggered when popover displayed

Question

I'm using Popover and Tooltip components (reusable) based on the sandbox examples at https://floating-ui.com/docs/tooltip and https://floating-ui.com/docs/popover. I have a Legend component that includes elements that have Tooltips on them. The code that shows the popover looks like this:

function LegendButton(props) {
  return (
      <po.Popover>
        <po.PopoverTrigger sx={{float:'right'}}>Display legend</po.PopoverTrigger>
        <po.PopoverContent className="Popover legend" >
          <po.PopoverHeading>Legend</po.PopoverHeading>
          <Legend/>
          <po.PopoverClose>Close</po.PopoverClose>
        </po.PopoverContent>
      </po.Popover>
  )
}

When I click the Display legend button, the tooltip on the first (or sometimes second, I just realized) element that has one is automatically displayed and I have to click that element to make it go away. It looks like this on opening the popover:

Googling for solutions, I stumbled upon this ancient jQuery complaint, which makes me think there's some browser interaction going on that's going to require deep magic to make popovers with tooltips inside them not misbehave. Any ideas what's going on with these floating-ui components and how to fix it?

Many thanks