Unable to delete character from an AceEditor JSON Widget from a class based react component

Question

I have a JSON widget over here, where a user can input some JSON data and save it. I am able to add JSON data inside the editor and also edit the JSON data inside the editor. The editor will show a validation error if the syntax is incorrect. However if I add some values inside the editor and If I try to delete them by means of backspace or select and delete, I am unable to delete just the first character from the top. I should be able to delete all the characters from the editor. As shown in the picture. The last character can be any string value and doesn't has to be only '{'.

here's my code

/* eslint-disable prettier/prettier */
import { isEqual } from 'lodash-es';
import * as React from 'react';
import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-iplastic';

interface StateProps {
  value: string;
}

interface PositionObject {
  row?: number;
  column?: number;
}

interface Selection {
  getCursor(): PositionObject;
}

export default class JsonWidget extends React.Component{
  public static defaultProps: Partial<JsonWidgetProps> = {
    isValid: true,
  };

  public state = {
    value: '',
  };

  private currentCursorPosition = {};
  private cursorPositionOnChange = null;
  private aceEditor: React.RefObject<AceEditor> = React.createRef();

  public componentDidMount() {
    this.aceEditor.current.editor.$blockScrolling = Infinity;
    this.aceEditor.current.editor.setOption('showPrintMargin', false);
  }

  public componentDidUpdate() {
    if (this.cursorPositionOnChange) {
      this.aceEditor.current.editor.moveCursorToPosition(this.cursorPositionOnChange);
    }

    if (typeof this.props.value === 'string' && this.props.value !== this.state.value) {
      this.setState({
        value: this.props.value,
      });
    } else if (typeof this.props.value !== 'string') {
      const value = JSON.stringify(this.props.value, null, 2);
      if (value !== this.state.value) {
        try {
          if (!isEqual(JSON.parse(this.state.value), this.props.value)) {
            this.setState({
              value,
            });
          }
        } catch (e) {
          this.setState({
            value,
          });
        }
      }
    }
  }

  public render(): React.ReactNode {
    console.log('this.state.value', this.state.value);
    return (
      <div className="fc-json-widget">
        {!this.props.isValid && this.props.error.message && (
          <p className="fc-json-widget--error">{this.props.error.message}</p>
        )}
        <AceEditor
          mode="json"
          theme="iplastic"
          style={{
            width: '100%',
            height: '600px',
          }}
          readOnly={this.props.disabled}
          wrapEnabled
          debounceChangePeriod={100}
          value={this.state.value}
          onChange={this.onChangeHandle}
          onCursorChange={this.onCursorChange}
          ref={this.aceEditor}
          editorProps={{
            $blockScrolling: true,
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
          }}
          setOptions={{ useWorker: false }}
        />
      </div>
    );
  }

  private onChange(event: string) {
    this.cursorPositionOnChange = this.currentCursorPosition;
    this.props.onChange({
      id: this.props.id,
      value: event === '' ? undefined : event,
    });
  }

  private onChangeHandle = (event: string) => {
    try {
      if (
        (typeof this.props.value !== 'string' && !isEqual(JSON.parse(event), this.props.value)) ||
        (typeof this.props.value === 'string' && event !== this.props.value)
      ) {
        this.onChange(event);
      }
    } catch (e) {
      this.onChange(event);
    }
  };

  private onCursorChange = (selection: Selection) => {
    this.currentCursorPosition = selection.getCursor();
  };
}