Tooltip on Leaflet GeoJSON is in wrong place

I’m trying to label a shape drawn by GeoJSON data in a way that keeps the label visible even if part or most of the shape is off screen. The code I am replacing uses a marker given fixed coordinates and therefore it is easy to pan the map and lose that point and the marker.

I’m now trying a tooltip but it often appears in completely the wrong place. These screenshots show the park with a rough circle in blue, and the tooltip with a white shape around it.

The code

 const parkStyle = {
   stroke: '#FF0000',
   opacity: 1,
   weight: 2,
   fillOpacity: 0,
 };
 const parkLayer = L.geoJSON(park.geometry, { style: parkStyle});
 parkLayer.bindTooltip(park.name, {permanent: true, className: 'park-tooltip'});
 parkLayer.addTo(this.map);

The GeoJSON

{"type":"Feature",
            "geometry":{"type":"MultiPolygon","coordinates":[[[[174.05775,-39.20426],[173.9917,-39.228962],[173.96663,-39.25221],[173.951402,-39.29586],[173.958095,-39.32588],[173.9772,-39.3520],[174.00701,-39.37177],[174.04410,-39.38188],[174.102089,-39.378061],[174.135973,-39.36288],[174.16105,-39.33972],[174.174412,-39.311416],[174.169730,-39.26711],[174.136330,-39.22888],[174.05775,-39.20426]]]]},
            "properties":{"name":"Egmont National Park", center: [173.96481435000607,-39.1332981]}},

relevant CSS

.leaflet-touch {
  .leaflet-tooltip {
    background-color: rgba(0, 0, 0, 0);
    border: 0px;
    color: #232D45;
    box-shadow: none;
    -webkit-text-stroke-width: 0.25px;
    -webkit-text-stroke-color: white;
    margin: 0px !important;
    font-size: 14px;
    line-height: 16px;
    font-weight: 900;
  }
  .leaflet-tooltip.park-tooltip {
    border-radius: 20px;
    background-color: #FFF;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: bold;
    color: #232D45;
    font-family: Roboto, "Open Sans", sans-serif;
  }
  .leaflet-tooltip-right:before, .leaflet-tooltip-left:before {
    border-color: rgba(0, 0, 0, 0);
  }
}