title: React leaflet close popup on button click
body: <p>When I click on Marker, Popup appears. Popup has a customized 'close' button. I want to use this button instead of default &quot;X&quot; in upper-right corner.</p>
  <p>I have seen these two questions:
  <a href="https://stackoverflow.com/questions/52085768/close-popup-react-leaflet-after-user-click-on-button-in-popup">close popup react-leaflet after user click on button in popup</a><br />
  <a href="https://stackoverflow.com/questions/62382859/how-can-i-make-the-leaflet-popup-to-show-when-i-click-on-a-list-button">How can I make the Leaflet Popup to show when i click on a list button</a></p>
  <p><code>popupRef.current._closeButton.click()</code> is not an option as I want to hide default close button - it doesn't work when I keep Popup property <code>closeButton={false}</code></p>
  <p>When I click on my button I get an error <code>TypeError: Cannot read property 'closePopup' of undefined</code></p>
  <pre><code>import React, {useRef} from 'react';
  import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';
  
  const MyComponent = () =&gt; {
  
      const popupElRef = useRef(null);
  
      const hideElement = () =&gt; {
          popupElRef.current.leafletElement.closePopup();
      }
  
      return (
              &lt;MapContainer
                  ref={mapRef}
                  &lt;Marker&gt;
                      &lt;Popup ref={popupElRef} closeButton={false}&gt;
                          &lt;button onClick={hideElement}&gt;Close popup&lt;/button&gt;
                      &lt;/Popup&gt;
                  &lt;/Marker&gt;
              &lt;/MapContainer&gt;
      );
  };
  
  export default MyComponent;
  </code></pre>
  <p>When I use <code>console.log(popupElRef)</code>, I see an object without <code>leafletElement</code> method. Neither I see anything that relates to leaflet methods.</p>
  <pre><code>options: {children: {…}}
  _closeButton: a.leaflet-popup-close-button
  _container: div.leaflet-popup.leaflet-zoom-animated
  _containerBottom: -7
  _containerLeft: -62
  _containerWidth: 124
  _contentNode: div.leaflet-popup-content
  _events: {remove: Array(2)}
  _initHooksCalled: true
  _latlng: LatLng {lat: 50.50, lng: 15.67}
  _leaflet_id: 1148
  _map: NewClass {options: {…}, _handlers: Array(6), _layers: {…}, _zoomBoundLayers: {…}, _sizeChanged: false, …}
  _mapToAdd: NewClass {options: {…}, _handlers: Array(6), _layers: {…}, _zoomBoundLayers: {…}, _sizeChanged: false, …}
  _source: NewClass {options: {…}, _latlng: LatLng, _initHooksCalled: true, _popup: NewClass, _events: {…}, …}
  _tip: div.leaflet-popup-tip
  _tipContainer: div.leaflet-popup-tip-container
  _wrapper: div.leaflet-popup-content-wrapper
  _zoomAnimated: true
  __proto__: NewClass
  </code></pre>
  <p>Is there any way my reference would work?</p>