Активировать текстовое поле материала onChange из внутреннего компонента

Я создаю компонент, например:

class IncrementField extends Component {
inputRef;

changeValue() {
    this.inputRef.value = parseInt(this.inputRef.value) + 1;
}

render() {
    const { ...other } = this.props;

    return (
        <StyledField>
            <StyledButton onClick = {this.changeValue.bind(this)}>-</StyledButton>
            <StyledTextField
                {...other}
                inputRef = {input => (this.inputRef = input)}
                type = {'number'}
                InputProps = {{
                    readOnly: true,
                }}
            />
            <StyledButton onClick = {this.changeValue.bind(this)}>+</StyledButton>
        </StyledField>
    )
}
}

Его цель - использовать в форме Formik, например

<IncrementField
        name = {`fieldname`}
        key = "fieldname"
        value = {values.fieldname}
        onChange = {changeAndSubmit.bind(this)}
        autoComplete = "false">
    </IncrementField>

Это такой компонент, как

- 1 +

где вы нажимаете + и - и значение увеличивается/уменьшается.

Звучит просто, но я не могу понять, как изменить значение изнутри. StyledTextField — это @material-ui/core/TextField, обернутый стилизованными компонентами. Что я хочу сделать, так это вызвать событие onChange, которое, очевидно, передается в реквизитах и ​​далее размещается с помощью {...other}. Я могу изменить значение ввода, но, вероятно, это не так, как это должно быть сделано - потому что onChange не срабатывает - и форма Formik не изменяется.

Я попробовал подход, который я вставил, я также пытался использовать значение в состоянии, но onChange никогда не срабатывает... как это сделать?

Одним из способов сделать это в Angular может быть использование декоратора @Output(), как это выглядит в React?