I have questionand I hope you can help me to find right answer.

I have the following code.

    import Slider from '@material-ui/core/Slider';

    export default function RangeSlider({setValue1}) {
    const location = useLocation();
    const classes = useStyles();
    const [value, setValue] = useState(['', 150000]);
    const handleChange = (event, newValue) => {
    setValue(newValue);
    setValue1(value);
   };

    useEffect(() => {
    setValue(['', 150000]);
    setValue1(value);
    }, [location.search]);

    return (
    <div className={`filter-slider-wrapper ${classes.root} `}>
      <p>
        <input
          type="number"
          className="slider-input"
          onChange={({target}) => {
            if (target.value.length > 7) {
              return false;
            }
            setValue([+target.value, value[1]]);
            setValue1(value);
          }}
          value={value[0]}
        />
      </p>
      <Slider value={value} onChange={handleChange} min={1} max={150000} />
      <p>
        <input
          type="number"
          className="slider-input"
          onChange={({target}) => {
            if (target.value.length > 7) {
              return false;
            }
            setValue([value[0], +target.value]);
            setValue1(value);
          }}
          value={value[1]}
        />
      </p>
    </div>
    );
   }

When I typeing something in input and after that I delleting form input everything was deleted, but after that "0" number was appeared and it was not deleteable, how can I avoid that case?