How to implement the installation of markers on the map, but not more than two, and so that the markers are reset to zero on the third click?

Question

JavaScript

Please help me to implement the function in React+Leaflet.
It is necessary that when clicking on the map (onClick does not work for some reason), a marker is placed on the map, but no more than two. As soon as there are two markers, the necessary action is performed (accessing the API with the coordinates of two points and laying a route - this function works), if a third click is made, then the two previous markers are reset.
Faced with the fact that onClick simply does not work.
Here is the code:

import React, { Component } from "react";
import L from "leaflet";
import { MapContainer as Map, TileLayer, ZoomControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";

import GeoJson from './GeoJson';

L.Icon.Default.imagePath = "https://unpkg.com/[email protected]/dist/images/";

export default class BaseMap extends Component {
    constructor() {
        super();

        this.state = {};
    }

    AddMarker(e) {
        console.log(e.latlng);
    }

    render() {
        return (
            <div className="container">
                <Map 
                    zoom={10}
                    zoomControl={false}
                    center={{lat: 59.939095, lng: 30.315868}}
                    onClick={this.AddMarker}
                >
                    <TileLayer
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <ZoomControl position="topright" />
                    <GeoJson />
                </Map>
            </div>
        );
    }
};

Answer 1

Either we bind the context when calling Or we pass an arrow function to the parameter Read about event handling in React
onClick={this.AddMarker.bind(this)}
onClick={e => this.AddMarker(e)}