React component not rendering?

Question

React

Hello. Please help. When submitting in the case of a triple inequality, one of the inputs must be cleared. But for some reason it doesn't clean up.

state = {
        new: '',
        confirm: '',
        error: false
    };
  onChange = (e) => {
        this.setState({
            new: e.target.value
        })
    };
    onChangeConf = (e) => {
        this.setState({
            confirm: e.target.value
        })
    };
    onSubmit = (e) => {
        e.preventDefault();
        console.log(this.state);
        if (this.state.new === this.state.confirm) {
            console.log('confirm!')
        } else {
            this.setState({
                new: this.state.new,
                confirm: '',
                error: true
            });
            console.log('else')
        }
    };

inputs themselves:

<Box mb={2}>
                        <StyledInputFrameB type='text'
                                           label='New password'
                                           required={true}
                                           onChange={this.onChange}
                                           value={this.state.new}/>
                    </Box>
                    <Box mb={4}>
                        <StyledInputFrameB type='text'
                                           label='Confirm new password'
                                           required={true}
                                           onChange={this.onChangeConf}
                                           value={this.state.confirm}
                            // error={error}
                            // helperText={error ? 'Error! Wrong data' : ''}
                        />

                    </Box>