Quiero dibujar líneas entre el nuevo punto en el que se hizo clic y el punto en el que se hizo clic anteriormente en el mapa del folleto cada vez que hago clic en el mapa. Intenté hacer esto con el siguiente código:

 import React, { useEffect, useState } from 'react'; import { Popup, Polyline, useMap} from 'react-leaflet'; import L from 'leaflet'; let oldPoint; const DrawLines=()=> { const [isChecked,setIsChecked]=useState() const handleChange=(e)=> { setIsChecked(e.target.checked); console.log(isChecked) } useEffect(() => { console.log(isChecked) }, [isChecked]) const map = useMap(); let points; useEffect(() => { if (!map) return; const info = L.DomUtil.create('div', 'legend'); const positon = L.Control.extend({ options: { position: 'bottomleft' }, onAdd: function () { info.textContent = 'Click on map'; return info; } }) map.on('click', (e) => { info.textContent = e.latlng; if(oldPoint != null){ points=[[oldPoint.lat, oldPoint.lng], [e.latlng.lat, e.latlng.lng]]; console.log(points); } oldPoint = e.latlng; }) map.addControl(new positon()); }, [map]) return ( <> {points!=null&&(isChecked===undefined||isChecked===false)&&<Polyline positions={points} weight={10} opacity={0.7} pathOptions={{ color: "red" }} > <Popup> <div> <label> Done <input type="checkbox" onClick={(e) => {handleChange(e)}}/> </label> </div> </Popup> </Polyline>} {points!=null&&isChecked===true&& <Polyline positions={[points]} weight={10} opacity={0.7} pathOptions={{ color: "green" }} > <Popup> <div> <label> Done <input type="checkbox" defaultChecked={true} onClick={(e) => {handleChange(e)}}/> </label> </div> </Popup></Polyline>} </> ) }

Este código dibuja polilíneas cuando los puntos se dan manualmente. Puedo obtener coordenadas cuando hago clic en el mapa del folleto. Pero el código no dibuja líneas entre estos dos puntos en los que se hizo clic en el script jsx mediante programación.