I want to add a line to previously created line with clicks on the map. But everytime i click on the map, previously created lines are deleted.

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;

I tried to store all points i clicked then draw polyline, but it didnt work. I want to keep previous state of the map. I believe there must be a way to do this. Any help is greatly appreciated. Thanks in advance.