react-hook-form material-ui Slider зацклился onChange

У меня есть компонент

import React, { forwardRef, useEffect } from 'react'
import uuid from 'react-uuid' 
import { useForm, Controller } from "react-hook-form";
import { Button, Box, Typography, Slider } from '@material-ui/core';

const MyRange = forwardRef(({item, submit, close}, ref) => {
  const { handleSubmit, reset, control, watch, register } = useForm();
  const c = watch()
  
  useEffect(()=>{
    console.log(c);
  },[c])

return (
    <form
      ref={ref}
      onSubmit={
        handleSubmit(submitRgb)
      }
    >
    {
      Object.keys(item).map((e)=>
        <Box display="flex" key={uuid()}>
          <Typography
          >
            {e}
          </Typography>
          <Box width="100%">
            <Controller
              name={e}
              control={control}
              defaultValue={item[e].value}
              render={
                ({onChange, value}) =>
                  <SelectRange
                    options={{
                      min: 0,
                      max: 255,
                      name: e,
                      value: value,
                      valueLabelDisplay: "auto",
                      onChange:(_e, val)=> {
                          onChange(val)
                      },
                    }}
                />}
              /> 
            </Box>
          </Box>
        )
      }
      <Box display="flex">
        <Button 
          onClick={()=>{
            reset()
            close()
          }}
        >
          Cancel
        </Button>
        <Button 
          type="submit"
        >
          Ok
        </Button>
      </Box
    </form>
  )
})

SelectRange

import React from 'react'
import { Slider } from '@material-ui/core';

const SelectRange = ({ options }) => {

  return (
    <Slider
      {...options}
    />
  )
}

в чем проблема: при изменении ползунка Slider функция onChange в Controller зацикливается

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.