Create a wider selection area to select the lines on react-leaflet map

Question

Having difficulty in selecting the lines on react-leaflet map, so I have followed the below solutions,

1. https://gis.stackexchange.com/questions/466747/create-wider-selection-area-to-select-lines-on-map-using-leafletjs

     const canvasRenderer = L.canvas({
          tolerance: 5,
     });

    <Polyline
        pathOptions={{
            renderer: canvasRenderer,
            color: "Black",
            smoothFactor: 1,
            opacity: 1,
            weight: 3,
        }}
        positions={[51.505, -0.09],[51.51, -0.1],[51.51, -0.12],}
        eventHandlers={{
            contextmenu(e) {
                //some function goes here.
            },
        }}
     >

The renderer was not working and there was no effect on the polylines. That I have posted here, I think the canvasRenderer wont work for react-leaflet

2. https://gis.stackexchange.com/questions/168465/making-a-leaflet-line-feature-more-grabbable

How to use the Leaflet Almost Over plugin with react-leaflet.

Many thanks for the help.