如何解决React输入标签没有触发onChange调用

我有一个React文件上传器组件，但我遇到了一个有趣的问题。 你看，有时（绝对不是每次，而且非常不一致）handleOnChange函数不会启动。下面是该组件返回的内容。

return (
    <>
      <label
        ref={innerRef}
        tabIndex={disabled ? -1 : tabIndex || 0}
        className={classes}
        onKeyDown={onKeyDown}
        htmlFor={inputId}
        {...other}>
        <span role={role} aria-disabled={disabled}>
          {labelText}
        </span>
      </label>
      <input
        className={`${prefix}--visually-hidden`}
        ref={inputNode}
        id={inputId}
        disabled={disabled}
        type="file"
        tabIndex="-1"
        multiple={multiple}
        accept={accept}
        name={name}
        onChange={handleOnChange}
        onClick={onClick}
      />
    </>
  );

这就是handleOnChange函数：

function handleOnChange(event) {
    const files = event.target.files;
    const length = event.target.files.length;
    if (files && !disableLabelChanges) {
      if (length > 1) {
        setLabelText(`${length} files`);
      } else if (length === 1) {
        setLabelText(files[0].name);
      }
    }
    onChange(event);
  }

起初我以为这与输入的值没有清除有关，但那是通过onClick函数完成的：

function onClick(event) {
    event.target.value = null;
  }

我真的不知道这里会有什么问题，有什么想法吗？