JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="map"></div>
<br>
<button id="btnCheckPopup">check popup</button>
<span id="popupStatus"></span>

CSS

body {
  margin: 0;
}

#map {
  height: 70vh;
  width: 100vw;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
    
var myPopup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);
    
btnCheckPopup.onclick = () => {
  let status = myPopup.isOpen()? 'popup is open' : 'popup is closed';
  document.querySelector('#popupStatus').innerHTML = status;
}