Continuous input while editing the dynamic table

Hi team, I am trying to create forge UI app, I used dynamic table to display the contain respective example of code as below:

Problem Statement: After the click on edit button, I can only type or give a single character in textarea field. example I want to insert AtlassianOne in TestCaseID, As i type “A” the focus from the respective cell is moved and again i need to click on the respective cell, Arrange the cursor to the correct place and retype next character

{ key: ‘TestCaseID’, content: <TextArea spacing=“compact” appearance=“subtle” resize=“smart” id={input-testcase-id-${index}} value={testCase.TestCaseID} isReadOnly={!isEditing} onChange={(e) => handleInputChange(index, ‘TestCaseID’, e.target.value)} /> },

// Handle input change
const handleInputChange = (index, field, value) => {
const updatedData = […editedData];
updatedData[index][field] = value;
setEditedData(updatedData);
};

// Handle edit button click
const handleEditButtonClick = () => {
setIsEditing(true);
};