My material ui slider works horribly bad on change value for extremums.

if both minimum and maximum are at 0 and i slide them both to 10, then minimum will always remain at 0 ? Why is that.

Same behavior occurs when i slide minimum and maximum to 0. Maximum value won’t be set to 0.

Is there somethng i am missing here ?

import React, { useState, useEffect } from 'react';
import Slider from '@mui/material/Slider';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function RangeSlider({ setFilter, filter }) {
  const [value, setValue] = useState([filter.minscore, filter.maxscore]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleChangeCommitted = (event, newValue) => {
    setFilter(previousState => ({
      ...previousState,
      minscore: newValue[0],
      maxscore: newValue[1]
    }));
    console.log(filter, 'newfilter');
  };

  const valuetext = (value) => {
    return `${value}`;
  };

  return (
    <Box sx={{ width: '15vh' }}>
      <Typography id="track-false-slider" gutterBottom>
        Score
      </Typography>
      <Slider
        getAriaLabel={() => 'Score'}
        value={value}
        onChange={handleChange}
        onChangeCommitted={handleChangeCommitted}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        min={0}
        max={10}
        size="small"
      />
    </Box>
  );
}