How to fix a bug in the Range element from the rc-slider package?

Question

React

Good day, I'm doing an online store, but there is a bug with the choice of price range. If you click on the Man button and then move through the shirt shorts jeans categories, the sliders will jump out of the slider, the link to the site and the component code with the slider:
https://quintis1212.github.io/max-shop/build/index.html

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ProductList from './ProductList';
import  { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

 class Products extends Component {
    state ={
        selected:true,
        value4: {
            min: 5,
            max: 10,
          }
    }
    brandHandler=(e)=>{
        // console.log(e.target.value)
        let brandVar = e.target.value;
        this.props.filterFunction(brandVar)
    }

    handleOnChange=(e)=>{
        console.log(e)
    }
    render() {
        let brandArr = []
        this.props.data.data.forEach(el=>{
            brandArr.push(el.brand)
        })

        brandArr=['All',...new Set(brandArr)];

        let priceArr =[];
        (this.props.data.brandData? this.props.data.brandData : this.props.data.data).forEach(el=>{
            priceArr.push(el.price)
        })

        let minPrice = Math.min(...priceArr);
        let maxPrice= Math.max(...priceArr);
        console.log(minPrice)
        console.log(maxPrice)

        return (
            <div>
            <label htmlFor="filter-by-brand">Choose your brand : </label>
            <select value={this.props.data.selectedValue}   onChange={(e)=>this.brandHandler(e)} id="filter-by-brand">
                {brandArr.map((el)=>{
                    return <option value={el}  key={el}>{el}</option>
                })}
            </select>
            <div className="price-range">
                <h3 className="range-title">Min price : </h3>
                <h3 className="range-title">Max price : </h3>
             <Range  min={minPrice}  max={maxPrice} defaultValue={[minPrice,maxPrice]} step={1} allowCross={false}  onChange={(e)=>this.handleOnChange(e)}/>
            </div>
            <div className="product-container" >
                <ProductList obj={this.props.data.brandData? this.props.data.brandData : this.props.data.data}/>
            </div>
            </div>
        )
    }
}


export default connect(state=>({
    data:state
}), 
   dispatch=>({
       filterFunction:(brandVar)=>{
        dispatch({type:'FILTER-DATA-BRAND',brandVar})
       }
   })

)(Products)

Answer 1

most likely defaultValue is only applied once on the first render, then ignored when you change categories. The easiest way is to give a Range key and change it when changing the category.