HuePicker 滑块不滑动反应颜色

如何解决HuePicker 滑块不滑动反应颜色

我正在尝试使用 react-color 创建一个huePicker。当前滑块有效并且正在选择新颜色。我知道这是因为我的 console.log。但是，滑块旋钮/指针不会随着我的鼠标指针移动，也就是滑块不会滑动。我不知道这是为什么。有人可以帮我吗？

import React,{useState} from "react";
import Slider from '@material-ui/core/Slider';
import {HuePicker} from 'react-color';
import reactCSS from 'reactcss'
import "./DailyForm.css"

const DailyForm = () => {
  const [colorValue,setColorValue] = useState({r: 10,g: 10,b: 10});

  function colorValueChange (event,newColor) {
    setColorValue(event.rgb);
    console.log(colorValue);
  }

  const styles = reactCSS({
    'default': {
      color: {
        width: '72px',height: '28px',borderRadius: '2px',background: `rgba(${colorValue.r },${ colorValue.g },${ colorValue.b },${ colorValue.a })`,}
    },});

  return (
    <div className="container">
      <div class = "questionSelection">
        <p class = "questions">
          Pick a color.
        </p>

        <p class = "questions">
          This is your current color:
        </p>

        <div class = "colorContainer">
          <div style = {styles.color} />
        </div>

        <HuePicker class = "colorSlider"
          onChange = {colorValueChange}
        />
      </div>
    </div>
  );
}

export default DailyForm;