LeafletJS Custom properties in feature collection

I am using Angular and Leaflet and I am adding a marker to a map every click:

Extract of relevant code:

  this.map = L.map('map', {
  crs: L.CRS.Simple,
  maxZoom: 3,
  minZoom: -1
})

L.imageOverlay(img, [[50, 50], [h, w]]).addTo(this.map);

this.map.fitBounds([[50, 50], [h, w]]);

this.drawnItems = L.featureGroup().addTo(this.map);

const onMapClick = (e: any) => {
  const marker = L.marker(e.latlng, {
    icon: this.markerStyle
  });
  
  marker.bindPopup(this.popupService.makeFormPopup(), {
    keepInView: true,
    closeButton: false,
    minWidth: 300
  })
marker.addTo(this.drawnItems).openPopup();

The marker collection (this.drawnItems) is later turned to geoJSON using:

const data = this.drawnItems.toGeoJSON();

in data it looks like:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"properties":{},"geometry":{"type":"Point","coordinates":[796,910.126465]}}}]}

I would like to populate the properties object with a value from the popup box, I can get the value fine but how would I set it inside that specific marker?
I have tried:

    if (!e.target.feature) {
      e.target.feature = [];
      e.target.feature.properties = {};// add blank property to marker then add key/pair
    }

But this code adds the properties to the geometry rather than the properties and makes the geoJSON invalid.

thanks