React form's onChange not triggered on value change

Question

React dom 16.4.0.

There is a form with an input inside. Changing input's value using programatically doesn't trigger form's onChange:

class Bar extends React.PureComponent<IProps, IState> {
  private foo: any;

  constructor(props: IProps, state: IState) {
    super(props);
    ..
    this.foo = React.createRef();
    ..

<form>
  ..
  <input ref={this.foo} type="text" />

..
private handleClick(e: React.MouseEvent<HTMLElement>) {
  const event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': false,
    'view': window,
  });
  this.foo.current.dispatchEvent(event); <- doesn't trigger form's onChange

Found this topic on React official GitHub. Also found this StackOverflow topic with lots of similar solutions (none of it work).

So any idea how to actually make input element trigger onChange?

IMPORTANT: I am actually trying to make Bootstrap button-group work. Since the radio got hidden and controlled using a span click, the onChange is not triggered.