Extending the following question: React-leaflet geojson onEachFeature popup with custom react component

I am trying to have a Form within each popup that renders. Ideally the user is able to edit certain values within the form and then submit it. Each polygon should have its own popup on click.

However, when i follow the question above, the event listeners aren't working. e.g, the page just refreshes instead of the e.preventDefault() working.

Could anyone point me how to solve this? or a more elegant solution?

fiddle/codesandbox: https://codesandbox.io/s/react-leaflet-geojson-oneachfeature-popup-with-custom-react-component-forked-dzo4jx

ALTERNATIVELY: A react component based method that unpacks the geojson, but this one, the mouseover event isnt working.. https://codesandbox.io/s/react-leaflet-geojson-oneachfeature-popup-with-custom-react-component-forked-8430lw

Either approach that solves the problem will do.

Thank you