CK Editor div tags are being replaced with p tags (React JS)

I am using CK editor and passing the initial data to editor as shown below

import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

classEditor extends React.Component{
constructor(props){
super(props)
this.state={
editorState:'<div class="main"><div class="child-1"><div>Iam inside </div></div><div class="child-2">Child 2</div></div>'
}
}
render(){
return           <CKEditor
                      editor={ClassicEditor}
                      data={this.state.editorState}
                      onInit={editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log('Editor is ready to use!', editor);
                      }}
                      config={{
                        allowedContent:true,
                        extraAllowedContent:true
                      }}
                      onChange={(event, editor) => {
                        const data = editor.getData();
                        this.handleEditorChange(data);
                        console.log(data);
                      }}
                    />
}
}

when the OnChange handler is called it is changing the initially passed html to something like this

<p>Iam inside</p><p>Child 2</p>

How Can I stop CK Editor replacing div tags with p tags and allow customStyles and classNames