редактор slate js как компонент формы

Question

Привет, я работаю над React Project, используя Slate. js текстовый редактор. Первоначально мне нужно настроить это как повторно используемый компонент в моей форме, который затем должен будет сохранить данные в моей базе данных. В настоящее время я использую эту документацию - slate. js

Моя форма должна состоять из этого поля, однако я могу сделать все, кроме привязки редактора к значению поля.

Вот мой код. Извините, если это не выясняется . js форма предоставляет.

interface IProps {
    input: any
}

export const SlateEditor: React.FC<IProps> = ({input}) => {
  const editor = useMemo(() => withReact(createEditor()), [])
  // Add the initial value when setting up our state.
  const [value, setValue] = useState([
        {
          type      : 'paragraph',
          children  : [{ text: 'A line of text in a paragraph.' }],
        },
    ]);

  const handleInput = (text: any) =>{
      console.log('wow',text);
      console.log(JSON.stringify(text));
      const test = JSON.stringify(text);    
      console.log(test);
  } 

  useEffect(() => {
      if(input.value){
          console.log('this is the input', input);
          setValue(JSON.parse(input.value));              
      }else{
          //input.value = JSON.stringify(value);
      }
  },[input, input.value])    
  return (
    <Slate 
        editor={editor} 
        value={value}
        onChange={value => handleInput(value)}
        {...input.value}>
      <Editable />
    </Slate>
  )}

Вот мой звонок из моей формы.

<SlateEditor input={page.content}/>

Итак, я пытаюсь связать входные данные со значением редактора. Я также проверяю, есть ли в моих значениях данные. Я не думаю, что я поступил правильно, любая помощь будет принята с благодарностью. Если у вас есть какие-либо запросы, я быстро обновлюсь.

Так что в идеале все, что мне требуется, - это page.content в форме, чтобы он представлял собой строку JSON объекта, который предоставляет редактор. js.