Couldn't draw polygons/polylines using leaflet, leaflet.draw

[kashkumar12]

I could easily draw rectangle, circle and markers as well, but I am not able to draw polygon or polyline. Here is my code, `

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet-draw/dist/leaflet.draw.css';
import 'leaflet-draw/dist/leaflet.draw-src.css';
import 'leaflet-draw'
useEffect(() => {
    var mapDisplay = L.map("map", {drawLayers:true, drawControl:true, drawControlTooltips:true}).setView(
      [-26.4391, 133.2813],
      5
    );
    let drawLayers = new L.FeatureGroup()
    mapDisplay .addLayer(drawLayers)

    var drawnItems = L.featureGroup().addTo(newMap);

    mapDisplay .on(L.Draw.Event.CREATED, function (event) {
         var layer = event.layer;

         drawnItems.addLayer(layer);
     });
    setMap(mapDisplay );
  }, []);
 return (
    <>
      <div
        style={{ padding: 0, margin: 0, width: "100%", height: "100vh" }}
        // ref={(el) => (mapContainer.current = el)}
        id="map"
      ></div>
    </>
  );

`

here is the versions I am using in my code

"leaflet": "^1.8.0",
"leaflet-draw": "^1.0.4",

[hlovdal]

This is a duplicate of #1026, which also includes a workaround.