antd hooks使用Editor 输入自动失焦的问题解决

antd官方文档里使用了类的react写法展示组件
直接复制代码进入自己的hooks项目中发现：
每输入一个字符，评论框就会自动失焦，需要再次点击才能继续输入。
出现这种情况是因为将Editor的定义放在了父组件内，挪到外部就可以了：

import {
    
     Comment, List, Input, Avatar, Form, Button } from 'antd'
import moment from 'moment'
const {
    
     TextArea } = Input

const Editor = ({
     
      onChange, onSubmit, submitting, value }) => {
    
    
  return (
    <>
      <Form.Item>
        <TextArea rows={
    
    4} onChange={
    
    onChange} value={
    
    value} />
      </Form.Item>

      <Form.Item>
        <Button
          htmlType='submit'
          loading={
    
    submitting}
          onClick={
    
    onSubmit}
          type='primary'
        >
          评论
        </Button>
      </Form.Item>
    </>
  )
}

const CommentX = props => {
    
    
  const LIST = useContext(ListContext)
  const [value, setvalue] = useState('')
  const [submitting, setsubmit] = useState(false)
  const handleSubmit = () => {
    
    
    if (!value) {
    
    
      return
    }

    setsubmit(true)

    setTimeout(() => {
    
    
      setsubmit(false)
      setvalue('')
      addCom({
    
    
        comment: value,
        start: localStorage.getItem('score'),
        shopid: localStorage.getItem('shopID')
      })
        .then(res => {
    
    
          console.log(res)
        })
        .catch(err => {
    
    
          console.log(err)
        })
      LIST.setcomments([
        ...LIST.comments,
        {
    
    
          author: localStorage.getItem('username'),
          score: localStorage.getItem('score'),
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: <p>{
    
    value}</p>,
          datetime: moment().fromNow()
        }
      ])
    }, 1000)
  }

  const handleChange = e => {
    
    
    setvalue(e.target.value) // ！！！！
    console.log(value)
  }

  return (
    <>
      <Comment
        avatar={
    
    
          <Avatar
            src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'
            alt='Han Solo'
          />
        }
        content={
    
    
          <Editor
            onChange={
    
    handleChange}
            onSubmit={
    
    handleSubmit}
            submitting={
    
    submitting}
            value={
    
    value}
          />
        }
      />
    </>
  )
}

export default CommentX

因为每次输入都会对value进行同步，重新渲染CommentX组件，子组件Editor随之被重新渲染。
当二者定义代码处于同级位置时，问题就不存在了、。