React Tab is not letting me edit text field, getting out of focus

Question

When i type, the textbox is getting out of focus. I am able to type only one letter at a time. Following is my code: -

    <TabPanel value={value} index={0}>
                  {[...Array(commentCount),].map((item, index) => {
                    return (
                      <>
                        <div className="col-12 d-flex comments-content">
                          <div className="mb-0 flex-10">
                            <textarea name="" id="" rows="4" className="w-100 p-2 mb-3" data-testid={"commentTextArea_" + index} 
                            value={ commentArea.find(x=>x.id==index)?.value==undefined?"":commentArea.find(x=>x.id==index)?.value} 
                            onChange={(e)=>{setComment(e,index)}}/>
                          </div>
                            </div>
                          </div>

and my js code is:-

   const [commentArea,setCommentArea]=useState([{value:"",id:0}]);
 const setComment=(e,index)=>{
const searched= commentArea.find(x => x.id === index);
if(searched!="" &&  searched!=undefined){
  searched.value=e.target.value;
}
else{
  let res={
    value:e.target.value,id:index
  }
  commentArea.push(res);
}
setCommentArea([...commentArea]);

}

Answer 1

Your textfield should have a event handler function looking like this:

  const handleChange = (event) => {
    setCommentArea(event.target.value);
  };

Answer 2

Don't use keys which are constantly changing.