Quiero agregar una línea a la línea creada anteriormente con clics en el mapa. Pero cada vez que hago clic en el mapa, las líneas creadas anteriormente se eliminan.

 import React, { useEffect, useState } from 'react'; import { Polyline, useMap} from 'react-leaflet'; import L from 'leaflet'; let previousPoint; let points; const DrawLines=()=> { const [Points,setPoints]=useState([]) const [drawLine,setDrawLine]=useState(false); const map =useMap(); useEffect(() => { if (!map) return; map.on('click', (e) => { if(previousPoint != null){ points=[[previousPoint.lat, previousPoint.lng], [e.latlng.lat, e.latlng.lng]] setPoints(points); setDrawLine(true) } previousPoint = e.latlng; }) map.addControl(new positon()); }, [map]) return ( <> { drawLine&&points&& <Polyline positions={Points} weight={10} opacity={0.7} color='red'> </Polyline> } </> ) } export default DrawLines;

Intenté almacenar todos los puntos en los que hice clic y luego dibujé una polilínea, pero no funcionó. Quiero mantener el estado anterior del mapa. Creo que debe haber una manera de hacer esto. Cualquier ayuda es muy apreciada. Gracias por adelantado.