Range slider : Unable to preventDefault inside passive event listener invocation on mobile device Chrome

Question

I am building a price range slider using basic HTML range input but while checking the same with react/next JS application on mobile device, getting the error react-dom.development.js?61bb:6202 Unable to preventDefault inside passive event listener invocation.

PriceSlider.js where the main component code is:

function PriceSlider({ handleChange, currencyDetails, queryParams }) {
    const [stateMinVal, setStateMinVal] = useState(0);
    const [stateMaxVal, setStateMaxVal] = useState(99999);
    const [inputMinVal, setInputMinVal] = useState(0);
    const [inputMaxVal, setInputMaxVal] = useState(99999);
    const [rangeError, setRangeError] = useState(false);
    let priceGap = 1;
    let { convertToCurrency = "", ipDetails = {} } = currencyDetails || {};

    const handlePriceInput = (e) => {
      e.preventDefault();
      let rangeInput = document.querySelectorAll(".range-input input"),
      priceInput = document.querySelectorAll(".price-input input"),
      range = document.querySelector(".slider .progress");
      let minPrice = priceInput[0].value ? parseFloat(priceInput[0].value) : priceInput[0].value,
      maxPrice = priceInput[1].value ? parseFloat(priceInput[1].value) : priceInput[1].value;
      
      if((minPrice > 0 && maxPrice > 0)){
        if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max) {
          setRangeError(false);
            if (e.target.className === "input-min") {
                // rangeInput[0].value = minPrice;
                setStateMinVal(minPrice);
                setInputMinVal(minPrice);
                range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
            } else {
                // rangeInput[1].value = maxPrice;
                setStateMaxVal(maxPrice);
                setInputMaxVal(maxPrice);
                range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
            }
            // apply price filter
            let minIn = getCurrencySymbol(convertToCurrency, true)+" "+minPrice;
            let maxIn = getCurrencySymbol(convertToCurrency, true)+" "+maxPrice;
            console.log(maxIn, minIn, convertToCurrency);
            let filterId = minIn+" - "+maxIn;
            setTimeout(() => handleChange({filterId: filterId , checked: true, filterType: 'range'}), 500);
            // ---- //
        }else{
          if(minPrice >= maxPrice){
            setRangeError(true);
            setInputMinVal(minPrice);
            setInputMaxVal(maxPrice);
          }else if(maxPrice >= rangeInput[1].max){
            // apply price filter
            let minIn = getCurrencySymbol(convertToCurrency, true)+" "+minPrice;
            let maxIn = getCurrencySymbol(convertToCurrency, true)+" "+maxPrice;
            let filterId = minIn+" - "+maxIn;
            setTimeout(() => handleChange({filterId: filterId , checked: true, filterType: 'range'}), 500);
            // ------ //
            setStateMinVal(minPrice);
            setStateMaxVal(rangeInput[1].max);
            
            setInputMinVal(minPrice);
            setInputMaxVal(rangeInput[1].max);
          }
        }
      }else if(minPrice == "" || maxPrice == ""){
        setInputMinVal(minPrice);
        setInputMaxVal(maxPrice);
      }
    }

    const handleRangeInput = (e) => {
      e.preventDefault();
      let rangeInput = document.querySelectorAll(".range-input input"),
      priceInput = document.querySelectorAll(".price-input input"),
      range = document.querySelector(".slider .progress");
      let minVal = parseFloat(rangeInput[0].value),
      maxVal = parseFloat(rangeInput[1].value);
      
      let diffMinMax = rangeInput[0].max - rangeInput[1].min;
      
      if ((maxVal - minVal) < priceGap) {
          if (e.target.className === "range-min") {
              rangeInput[0].value = maxVal - priceGap
          } else{
              rangeInput[1].value = minVal + priceGap;
          }
      } else {
          priceInput[0].value = minVal;
          priceInput[1].value = maxVal;
          setStateMinVal(minVal);
          setStateMaxVal(maxVal);
          range.style.left = (minVal - rangeInput[0].min) / diffMinMax * 100 + "%";
          range.style.right = (rangeInput[0].max - maxVal) / diffMinMax * 100 + "%";
          // apply price filter
          let minIn = getCurrencySymbol(convertToCurrency, true)+" "+minVal;
          let maxIn = getCurrencySymbol(convertToCurrency, true)+" "+maxVal;
          let filterId = minIn+" - "+maxIn;
          setTimeout(() => handleChange({filterId: filterId , checked: true, filterType: 'range'}), 500);
          // handleChange({filterId: filterId , checked: true, filterType: 'range'});
      }
    }

    useEffect(() => {
      let rangeInput = document.querySelectorAll(".range-input input");
      let priceInput = document.querySelectorAll(".price-input input");
      let range = document.querySelector(".slider .progress");
      priceInput.forEach(input => {
          input.addEventListener("input", handlePriceInput);
      });

      rangeInput.forEach(input => {
          input.addEventListener("input", handleRangeInput);
      });

      priceInput[0].value = stateMinVal;
      priceInput[1].value = stateMaxVal;

      if(queryParams && queryParams['range']){
        let symbol = getCurrencySymbol(convertToCurrency, true);
        let value = queryParams['range'];
        let min = value.split('-')[0].split(symbol)[1]?.trim();
        let max = value.split('-')[1].split(symbol)[1]?.trim();
        console.log('minmax', min, max, symbol)
        setStateMinVal(min);
        setStateMaxVal(max);
        
        setInputMinVal(min);
        setInputMaxVal(max);
        let diffMinMax = rangeInput[0].max - rangeInput[1].min;
        range.style.left = (min - rangeInput[0].min) / diffMinMax * 100 + "%";
        range.style.right = (rangeInput[0].max - max) / diffMinMax * 100 + "%";
      }

      return () => {
        console.log('m here')
        priceInput.forEach(input => {
            input.removeEventListener("input", handlePriceInput);
        });

        rangeInput.forEach(input => {
            input.removeEventListener("input", handleRangeInput);
        });
      }

      //Init max-price input fields
      // handleRangeInput();
    }, []);

    return (
      <div class="price_wrapper">
        <div class="slider">
          <div class="progress"></div>
        </div>
      
        <div class="range-input">
          <input type="range" class="range-min" min="0" max="99999" defaultValue={stateMinVal} step="1" />
          <input type="range" class="range-max" min="0" max="99999" defaultValue={stateMaxVal} step="1" />
        </div>
      
        <div class="price-input">
          <div class="field">
            <input type="number" class="input-min" defaultValue={inputMinVal} />
          </div>
          <div class="field">
            <input type="number" class="input-max" defaultValue={inputMaxVal} />
          </div>
        </div>
        {rangeError && <div className="qa-text-error">
          Please add an appropriate MIN - MAX value
        </div>}
      </div>
    )
  }

Tried with adding {passive: false} while adding eventlistener to elements but that didn’t work either. Any suggestion/info will be of great help here. Thanks in advance :)