How to disable header and footer element in ckeditor inline for reactjs

I need to disable incoming html element for example p tag is read only .

constructor(props) { super(props);

this.state = {
  data: '<div><h1>can edit user</h1><p>disable-readonly</p></div>’
};

this.handleChange = this.handleChange.bind(this);
this.onEditorChange = this.onEditorChange.bind(this);

}

onEditorChange(evt) { this.setState({ data: evt.editor.getData() }); }

handleChange(changeEvent) { this.setState({ data: changeEvent.target.value }); }

onSubmit = (e) => { e.preventDefault(); this.setState({ data: this.state.data }) console.log(this.state.data) }

<CKEditor type="inline" readOnly={true} data={this.state.data} onChange={this.onEditorChange} style={{ float: 'left', width: '50%' }} >

I get only div in my editor , but p tag will read only. if user want to edit they can edit h1 tag