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

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

Я попытаюсь сделать функцию, но я понятия не имею, как это сделать? у кого-нибудь есть?

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.info("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, но я хочу сделать это динамически? Как сделать?

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

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

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