How to ref every react leaflet popup in react class component?

I have an issue, I seem not to find how to give a ref to every popup in react class component. Here's my code:

export default class LiveTracking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      popup: React.createRef()
    };  
  render() {   
    return (
      <MapContainer center={[-12.576, 140.664]} zoom={5}>
        <TileLayer
          attribution='&copy; <a 
          href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {this.state.data.map((item) => (
          <Marker>
            <Popup ref={this.state.popup}>
              <div className="popup">
                <p>This is the popup</p>
              </div>
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    );
  }
}

I need to give every popup a ref so I know what popup that shows and I have to close it after a click event. Or if you know how to close all popups after clicking on react-leaflet let me know. Looking forward to your help, Regards