我正在React中使用MouseEvent<HTMLElement>转换按钮组件以使用Hooks。但是，每个鼠标事件现在都出现RangeError: Maximum call stack size exceeded错误。

新代码是

  const [isactive,setIsactive] = useState(false);
  const [isFocus,setIsFocus] = useState(false);
  const [isHover,setIsHover] = useState(false);

  useEffect(() => {
    if (autoFocus && button instanceof HTMLButtonElement) {
      button.focus();
    }
  },[autoFocus,button]);

  const isInteractive = () => !isDisabled && !isLoading;

  const onmouseEnter = (e: MouseEvent<HTMLElement>) => {
    setIsHover(true);
    if (onmouseEnter && !isHover) {
      onmouseEnter(e);
    }
  };

  const onmouseLeave = (e: MouseEvent<HTMLElement>) => {
    setIsactive(false);
    setIsHover(false);
    if (onmouseLeave && isHover) {
      onmouseLeave(e);
    }
  };

  const onmouseDown = (e: MouseEvent<HTMLElement>) => {
    e.preventDefault();
    setIsactive(true);
    if (onmouseDown && !isactive) {
      onmouseDown(e);
    }
  };

  const onmouseUp = (e: MouseEvent<HTMLElement>) => {
    setIsactive(true);
    if (onmouseUp && !isactive) {
      onmouseUp(e);
    }
  };

  const onFocus: FocusEventHandler<HTMLButtonElement> = event => {
    setIsFocus(true);
    if (onFocus) {
      onFocus(event);
    }
  };

  const onBlur: FocusEventHandler<HTMLButtonElement> = event => {
    setIsFocus(false);
    if (onBlur) {
      onBlur(event);
    }
  };

  const onInnerClick: MouseEventHandler<HTMLElement> = e => {
    if (!isInteractive()) {
      e.stopPropagation();
    }
    return true;
  };

  const StyledButton: ReactType = CustomComponent || getElement();
  render() {
    return (
      <StyledButton
        onmouseEnter={onmouseEnter}
        onmouseLeave={onmouseLeave}
        onmouseDown={onmouseDown}
        onmouseUp={onmouseUp}
        onFocus={onFocus}
        onBlur={onBlur}
      >
        {children}
      </StyledButton>
    );
  };

原始代码是有效的

state = {
  isactive: false,isFocus: false,isHover: false,};

componentDidmount() {
  if (this.props.autoFocus && this.button instanceof HTMLButtonElement) {
    this.button.focus();
  }
}

isInteractive = () => !this.props.isDisabled && !this.props.isLoading;

onmouseEnter = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isHover: true });
  if (this.props.onmouseEnter) {
    this.props.onmouseEnter(e);
  }
};

onmouseLeave = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isHover: false,isactive: false });
  if (this.props.onmouseLeave) {
    this.props.onmouseLeave(e);
  }
};

onmouseDown = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
  this.setState({ isactive: true });
  if (this.props.onmouseDown) {
    this.props.onmouseDown(e);
  }
};

onmouseUp = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isactive: false });
  if (this.props.onmouseUp) {
    this.props.onmouseUp(e);
  }
};

onFocus: React.FocusEventHandler<HTMLButtonElement> = event => {
  this.setState({ isFocus: true });
  if (this.props.onFocus) {
    this.props.onFocus(event);
  }
};

onBlur: React.FocusEventHandler<HTMLButtonElement> = event => {
  this.setState({ isFocus: false });
  if (this.props.onBlur) {
    this.props.onBlur(event);
  }
};

onInnerClick: React.MouseEventHandler<HTMLElement> = e => {
  if (!this.isInteractive()) {
    e.stopPropagation();
  }
  return true;
};

const StyledButton: React.ReactType = CustomComponent || this.getElement();
render() {
  return (
    <StyledButton
      onmouseEnter={onmouseEnter}
      onmouseLeave={onmouseLeave}
      onmouseDown={onmouseDown}
      onmouseUp={onmouseUp}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      {children}
    </StyledButton>
  );
};

我在带有钩子的新代码中错过了什么，这些钩子导致event重复出现？