How to disable dragging of slider when i drag thumb of <Slider> from material Ui

[keryaBoks]

Here my code
import React, { useState } from "react";
import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";
import Slider from "@mui/material/Slider";
import "./styles.scss";

const KeenSlider = () => {
const [currentSlide, setCurrentSlide] = useState(0);
const [loaded, setLoaded] = useState(false);
const [rangeValue, setRangeValue] = useState(0);
const [sliderRef, instanceRef] = useKeenSlider({
initial: 0,
drag: true,
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel);
},
created() {
setLoaded(true);
},
});

const slideContents = [
{ number: "1", description: "Question 1 description" },
{ number: "2", description: "Question 2 description" },
{ number: "3", description: "Question 3 description" },
{ number: "4", description: "Question 4 description" },
{ number: "5", description: "Question 5 description" },
{ number: "6", description: "Question 6 description" },
];

return (
<>

{slideContents.map((content, index) => (
<div key={index} className={keen-slider__slide number-slide}>

{content.number}  из {slideContents.length}

{content.description}

          <div className="input-wrapper">
            <div className="numbers-wrapper">
              <div className="first-number">0</div>
              <div className="second-number">10</div>
            </div>
            <Slider
              onClick={(event) => event.stopPropagation()}
              size="small"
              defaultValue={3}
              aria-label="Small"
              valueLabelDisplay="auto"
              step={1}
              min={0}
              max={10}
              sx={{
                width: 290,
                height: 10,
                color: 'linear-gradient(90deg, #67A8F4 36.52%, #43C3AC 100%)',
                '& .MuiSlider-thumb': {
                  width: 13,
                  height: 13,
                  backgroundColor: '#1E1E1E',
                  boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.5)',
                  '&:hover': {
                    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.5)',
                  },
                },
                '& .MuiSlider-valueLabel': {
                  color: 'black',
                  backgroundColor: 'transparent',
                  border: 'none',
                  marginTop: '10px'
                },
                '& .MuiSlider-track': {
                  color: 'linear-gradient(90deg, #67A8F4 36.52%, #43C3AC 100%)',
                },
                '& .MuiSlider-rail': {
                  color: 'white',
                },
              }}
            />
            
          </div>
        </div>
      ))}
    </div>
  </div>
  {loaded && instanceRef.current && (
    <div className="dots-wrapper">
      <div className="dots">
        {[
          ...Array(instanceRef.current.track.details.slides.length).keys(),
        ].map((idx) => {
          return (
            <button
              key={idx}
              onClick={() => {
                instanceRef.current?.moveToIdx(idx);
              }}
              className={"dot" + (currentSlide === idx ? " active" : "")}
            ></button>
          );
        })}
      </div>
    </div>
  )}
</>

);
};

export default KeenSlider;