I have a page with a search, you can filter the results with a range slider. I have an onChange event on the slider that should dynamically set a .filter param. I am passing that param to a chained .sort().filter(props.filter).map().

When I use the slider, it is changing the parameter that I'm passing through, but the .map() is not updating the results.

Any help greatly appreciated:

    let genderSpecificFilter = 'All';
    let rangeSpecificFilter = 'All'
    let sendFilteredDoctors = () => filterDoctors(genderSpecificFilter,rangeSpecificFilter);

    function changeRangeFilterParams() {
        rangeSpecificFilter = checkBoxDistanceMap[document.getElementById('range-miles').value];
        sendFilteredDoctors = filterDoctors(genderSpecificFilter,rangeSpecificFilter);
        console.log(rangeSpecificFilter)
    }

<PrintSearchResults
                                doctors={doctors} 
                                filters={sendFilteredDoctors}
                            />

import PrintDoctor from "./printdoctor";

function PrintSearchResults(props) {
    return (
        <div>
            {props.filters}
            <p className="text-xl text-gray-350">
                Total Results: 
                <span className="ml-3" id="total-results-num">
                    {props.doctors.results
                    .sort((a, b) => a.locations[0].distance - b.locations[0].distance)
                    .filter(props.filters).length}
                </span>
            </p>
            
            {props.doctors.results
            .sort((a, b) => a.locations[0].distance - b.locations[0].distance)
            .filter(props.filters)
            .map((doctor, key) => (
                <PrintDoctor 
                    image={doctor.image} 
                    url={doctor.url}
                    fullName={doctor.fullName} 
                    specialties={doctor.specialties} 
                    locations={doctor.locations}
                    gender={doctor.gender}
                    key={key}
                />
            ))}

        </div>
    );
}
export default PrintSearchResults

Edit: On change coming from here:

<input onChange={changeRangeFilterParams} type="range" min="1" max="6" className="slider" defaultValue="6" id="range-miles" />