Empty ghost Popup when dynamically rendering popup in react-leaflet

I'm dynamically rendering a marker popup in react-leaflet via a series of nested marker elements: DonutMarker, BoundsDriftMarker, and DriftMarker. The Popup is created in DonutMarker (GitHub) and passed to BoundsDriftMarker as a prop:

export default function DonutMarker(props: DonutMarkerProps) {
  ...
  return (
    <BoundsDriftMarker
      ...
      popup={
        <Popup>
          ...
          test
        </Popup>
      }
      showPopup={props.showPopup}
    />
  );
}

then from BoundsDriftMarker (GitHub) it's dynamically rendered as a child to DriftMarker:

export default function BoundsDriftMarker({position, bounds, icon, duration, popup, showPopup}: BoundsDriftMarkerProps) {
  ...
  return (<DriftMarker
    ...
  >
    ...
    {showPopup && popup}
  </DriftMarker>)
}

This is what it looks like currently when showPopup == true, along with the React browser plugin correctly showing the Popup element under the marker:

However, when I switch showPopup == false after this, I get an empty popup even though the browser plugin shows no popup:

Are the nested marker components causing this issue, or is there some other problem?