title: use a focusing on the element(textarea) after every axios response
body: <p>I am trying to use a focusing on the element(textarea) after every axios response.
  My goal is this every type in textarea change HighlightWithinTextarea values but mMy problem is :
  when i type in textarea and change value of HighlightWithinTextarea ,focus goes from the textarea to the other page elements
  My code is this:</p>
  <pre><code>import React, {useEffect} from 'react';
  import 'antd/dist/antd.css';
  import './index.css';
  import axios from &quot;axios&quot;;
  import {useState} from 'react';
  import {Layout, Menu} from 'antd';
  import {HighlightWithinTextarea} from 'react-highlight-within-textarea'
  import {Card, Form, Input, Button, Divider} from 'antd';
  
  const {Header, Content} = Layout;
  const {TextArea} = Input;
  const Demo = () =&gt; {
      const [form] = Form.useForm();
      const [note, setNote] = useState('');
      const [input, setInput] = useState('');
      const [output, setOutput] = useState('');
      const [inputStar, setInputStar] = useState('');
      const areaRef = React.useRef(null);
      const [area, setArea] = React.useState(true);
      const onChange = (e) =&gt; {
          var ret = e.replaceAll('**', '');
  
      }
      const handelChange = (e) =&gt; {
          console.log(e.target.value);
          var data = {};
          data.note = e.target.value;
  
          axios
              .post(&quot;http://localhost/s1&quot;, {
                  text: data.note,
                  headers: {
                      &quot;Content-Type&quot;: &quot;application/json&quot;
                  }
              })
              .then(response =&gt; {
                  console.log(data.note);
  
                  setOutput(response.data.output);
                  setInput(response.data.input);
              })
  
      }
      return (
          &lt;Layout className=&quot;layout&quot;&gt;           
              &lt;Content style={{padding: '0 50px'}}&gt;
                  &lt;Card&gt;
                      &lt;Divider&gt;spell checker&lt;/Divider&gt;
                      &lt;Form form={form} name=&quot;control-hooks&quot; onFinish={onFinish}&gt;
                          &lt;Divider orientation=&quot;right&quot; plain&gt;متن را وارد نمایید &lt;/Divider&gt;
                          &lt;Form.Item
                              name=&quot;note&quot;
  
                              value={note}
                              onChange={handelChange}&gt;
                              &lt;TextArea rows={10}/&gt;
                          &lt;/Form.Item&gt;
                      &lt;/Form&gt;
                      &lt;Card&gt;
                          &lt;HighlightWithinTextarea
                              value={input}
                              onChange={onChange}
                              highlight={/\*\*[\u0600-\u06FF]*\*\*/gi}
                          /&gt;
                          &lt;HighlightWithinTextarea ref={areaRef}
                                                   value={output}
                                                   onChange={onChange}
                                                   highlight={/\*\*[\u0600-\u06FF]*\*\*/gi}
                          /&gt;
  
                      &lt;/Card&gt;
                  &lt;/Card&gt; &lt;/Content&gt;&lt;/Layout&gt;
  
      )
  
  
  };
  
  export default Demo;
  </code></pre>