How to search all points near to polyline?

Question

In react-leaflet project I've used react-leaflet-draw to draw shapes. for a polyline, I coded a specific form. User can input a buffer for the created polyline. This buffer must be displayed as a shadow for polyline with width in meters or kilometers. Now I want to display (render) all points (markers) that their latlngs are inside that shadow or buffer size. How can I implement this?

Here is a link to my codesandbox

https://codesandbox.io/s/confident-swanson-rfp39?

It contains map component and a small node.js server

first I start server using node mapserver.js and then draw a polyline. after or before that I should input a buffer size either in m or km. Then I click on button and a fetch request begins. after fetch completed, All points that are in buffer area, must be displayed with a marker.

Above all, when updating buffer, it must be displayed as shadow for polyline but I couldn't implement that:|||

I implemented such a search for circles and polygons but my solution for polyline fails.

Here is onCreate method that handles onCreated event:

`

const onCreated = e => {
    console.log(e);
    console.log(editableFG);
    const { layerType, layer } = e;
    const drawnItems = editableFG.leafletElement._layers;
    console.log(drawnItems);
    if (Object.keys(drawnItems).length > 1) {
        Object.keys(drawnItems).forEach((layerid, index) => {
            if (index > 0) return;
            const layer = drawnItems[layerid];
            editableFG.leafletElement.removeLayer(layer);
        });
        console.log(drawnItems);
    }
    if (layerType === 'polyline') {
        setPolylineLayers(() => [
            {
                id: layer._leaflet_id,
                latlngs: layer.getLatLngs(),
                type: layerType
            }
        ]);
    }
};

`

Here is my algorithm for polyline search: `

    fetch('http://localhost:8000/geoData')
        .then(res => {
            if (!res.ok) {
                console.log(Promise.reject('request has been rejected'));
            }
            return res.json();
        })
        .then(data => {
            let m = [];
            let c = [];
            let points = [];
            for (let j = 1; j <= polylineLayers.latlngs.length; j++) {
                // m = (y1-y0)/(x1-x0)
                let x =
                    polylineLayers.latlngs[j][0] -
                    polylineLayers.latlngs[j - 1][0];
                let y =
                    polylineLayers.latlngs[j][1] -
                    polylineLayers.latlngs[j - 1][1];
                let z = y / x;
                m.push(z);
                // y - y0 = m(x-x0) => c = mx0 - y0
                let constant =
                    m[j - 1] * polylineLayers.latlngs[j - 1][0] +
                    polylineLayers.latlngs[j - 1][1];
                c.push(constant);
            }
            for (let i = 0; i < data.latlngs.length; i++) {
                for (let j = 0; j < m.length; j++) {
                    // distance = abs(y0-m*x0 + c)/sqrt(1+m^2)
                    let a = Math.abs(
                        data.latlngs[i][1] -
                            m[j] * data.latlngs[i][0] +
                            c[j]
                    );
                    let b = Math.pow(1 + Math.pow(m[j], 2), 2);
                    let distance = a / b;
                    if (bufferScale === 'm') {
                        if (distance < buffer / 1000) {
                            points.push(data.latlngs[i]);
                        }
                    } else {
                        if (bufferScale === 'km') {
                            if (distance < buffer) {
                                points.push(data.latlngs[i]);
                            }
                        }
                    }
                }
            }
            setPostions(points);
        });

` Any help would be pleasant :))