Перетащить на Изменить невозможно, когда стиль слайдера пользовательского интерфейса стилизован

Question

Как только я начинаю стилизовать Slider-Component из material-ui, Drag-to-Change-Value работает только на Click, но НЕ на Drag. Поэтому я могу изменить значение, щелкнув где-нибудь на дорожке ползунка, но не могу перетащить ползунок, чтобы изменить значение.

Я уже пробовал стилизовать его с помощью 'styled-components', но возникает нормальная проблема.

...

   thumb: {
     height: 35,
     width: 35,
     border: '1px solid var(--grey)',
     boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
     backgroundColor: 'var(--light-font)',
   },
   track: {
     backgroundColor: 'var(--primary-color)',
     height: 3,
     borderBottom: '1px solid grey',
   },
   trackAfter: {
     backgroundColor: 'var(--bg-grey)',
   },
 })(Slider)

 return (
   <>
     <h6>Weekly Goal: {weeklyGoal[page]}hr</h6>
     <StyledSlider
       style={{ touchAction: 'none' }}
       type="range"
       min={0}
       max={20}
       step={1}
       value={weeklyGoal[page]}
       onChange={handleGoalChange}
     />
   </>
 )
}