I'm facing a weird issue with the input field in React. I'm aware of the fact that `hidden` input do not trigger `input` nor `change` events. However, even if I trigger them manually, React's `onChange` event is still not being invoked.

I trigger both, `change` and `input` event here because React's `onChange` is in fact the `input` event. When I setup an event listener on the `inputRef` (`addEventListener("change", () => { ... })`) for testing purposes, it's being called without without problems. However, it turns out React is having some issue intercepting it.

Here is my current code:

```
const [fieldValue, setFieldValue] = useState(0);
const inputRef = useRef<HTMLInputElement>(null);

const handleClick = useCallback((): void => {
    if (inputRef.current) {
        inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
        inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
    }

    setFieldValue(prev => prev + 1);
}, []);

```

JSX:

```
<input type="hidden" ref={inputRef} value={fieldValue} onChange={(e) => { console.log("React:onChange"); }} />
<button type="button" onClick={handleClick}>Hit it</button>

```

Am I doing anything wrong here? What else do I have to do to properly trigger React's `onChange` event?