Как изменить оттенки серого, используя крючки в реакции?

Question

Я хочу изменить ползунок изображения, используемый с материалом пользовательского интерфейса, когда я перетаскиваю ползунок, но он изменяет только оттенки серого, но на ползунке ничего не происходит, почему? Я постараюсь сделать функцию, но я понятия не имею, как это сделать? у кого-нибудь есть?

import React, { useState, useEffect } from 'react';
import logo from '../logo.svg';
import defaultImage from '../Image/sen.jpg';
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/lab/Slider";

function ImageSlider ({ value, max, onChange, children }) {
  return (
    <>
      <Typography id="label">
        {children}
      </Typography>
      <Slider className="slider"
        min={0}
        max={max}
        value={value}
        aria-labelledby="label"
        step={1}
        onChange={onChange}
      />
    </>
   )
}


export default function Hooks () {
  const [name, setName] = useState('Franek!');
  const [contrast, setContrast] = useState('100%');
  const [brightness, setBrightness] = useState('100%');
  const [invert, setInvert] = useState("0%");
  const [hue, setHue] = useState("0deg");
  const [saturate, setSaturate] = useState("100%");
  const [sepia, setSepia] = useState("0%");
  const [grayscale, setGrayscale] = useState('0%');
  const [rotation, setRotation] = useState("0deg");
  const [width, setWidth] = useState('0');
  const [height, setHeight] = useState('0');
  const [color, setColor] = useState('black');

  const container = {
    display: 'grid',
    gridTemplateColumns: 'auto auto auto',
    gridTemplateRows: '80px 200px',
    gridGap: '200px',
    padding: '10px'
  }
  const settings = {
    width: '200px',
    maxHeight: '1000px'
  }
  const buttonStyle = {
    height: '50px',
    width: '200px'
  }
  const parametersStyle = {
    height: '50px',
    width: '100px',
    marginBlockEnd: '0',
    marginBlockStart: '0',
    backgroundColor: 'rgba(46, 56, 79, 0.85)',
    padding: '1em'
  }
  const imgStyle = {
    width: '300px',
    height: '300px',
    transform: `rotate(${rotation})`,
    filter: `sepia(${sepia}) grayscale(${grayscale}) hue-rotate(${hue}) saturate(${saturate}) invert(${invert}) contrast(${contrast}) brightness(${brightness})`,    
    color: color
  }
  const elementChangingStyle = {
    maxWidth: '600px',
    maxHeight: '600px'
  }
  const headerTitle = {
    color: '#ffffff',
    fontSize: '40px',
    padding: '1em'
  }
// thiw function but they are get only 50 and see
   function onGrayscale (e, grayscale) {    
     let newGrey = grayscale;
     console.log("this onGrayscale " + setGrayscale('50'));
   }
  return (
    <div>
        <div style={headerTitle}>
          React Photo-Modifier <br/> with Hooks
        </div>  
      <div style={container}>
        <div style={settings}>
          <ImageSlider
              max={100}
              value={grayscale}
              onChange={e => setGrayscale(e.target.value)}
          >
              Grayscale {grayscale}
          </ImageSlider>
        </div>
        <div style={elementChangingStyle}>
          <div>
            <span>
              <img src={logo} className="App-logo" alt="logo" />
            </span>   
          </div>   
          <img style={imgStyle} src={defaultImage} />
          <p style={imgStyle} > {name}</p>
        </div>
      </div>
    </div>
  )  
}

если я запустил функцию onGrayscale, у меня есть только слайд до 50, но я хочу сделать это динамически? Как это сделать?

Если я установил для i ImageSlider целевое значение, то изменился на оттенки серого, но я не могу изменить вручную с помощью ползунка? Что я делаю не так?

РЕДАКТИРОВАТЬ 1: Это. теперь это работает! Под функцию и вернуть взамен.

function onGrayscale (e, grayscale) {    
    setGrayscale(grayscale);
  }
<ImageSlider
   max={100}
   value={grayscale}
   onChange={onGrayscale}
>
   Grayscale {grayscale}
</ImageSlider>

Answer 1

Вы неправильно используете аргументы функции в функции onGrayScale. Этой функции передается только значение, а не событие, поэтому она будет выглядеть как

   function onGrayscale (grayscale) {    
     let newGrey = grayscale;
     setGrayscale(grayScale);
   }