Editor doesn't rerender when I change the 'value' props

I am using two editors at same time. An update in one editor should update the second one and viceversa. I have used same state variable in both editors and i have handled onChange in both editors by changing the state variable jsonData. Still when I change JSON data in one editor the other one doesn’t rerender. It remains same. The following is my code:

`<div> <Editor value={this.state.jsonData} ajv={ajv} onChange={ (jsonData) => this.setState({ jsonData }) } search={false} navigationBar={false} /> <Editor value={this.state.jsonData} onChange={ (jsonData) => this.setState({ jsonData }) } mode=“code” />

</div>`

[uooopss]

@vankop thank you so much for your answer!

const JsonEditor = ({ data = {}, handleJSON}) => {
  const jsonEditorRef = useRef(null)

  useEffect(() => {
    if (jsonEditorRef.current !== null) {
      jsonEditorRef.current.set(data);
    }
  }, [data])

  const setRef = instance => {
    if (instance) {
      jsonEditorRef.current = instance.jsonEditor;
    } else {
      jsonEditorRef.current = null;
    }
  };

  return (
    <Editor
      ref={setRef}
      value={data}
      onChange={handleJSON}
      search={false}
      statusBar={true}
      mode='code'
      htmlElementProps={{
        style: {
          height: 500
        },
      }}
    />
  );
} 

[vankop]

@markdemich you need to get ref of <JsonEditor /> to get access to editor instance explicitly. For instance:

class YourComponent extends React.Component {
   setRef = instance => {
         if (instance) {
                const {jsonEditor} = instance;
               this.jsonEditor = jsonEditor;
         } else {
               this.jsonEditor = null;
         }
   };

  render() {
     return (
          <Editor
                     ref={this.setRef}
             />
    );
  }
}

then you can do what ever you want with jsonEditor using api