How to update edited value in the Fluent UI React <DetailList/>

Question

I am building a table grid using Fluent UI. The project is in React with TypeScript. However, I am facing a problem with the updated value. After double-clicking, the edit box appears in the selected row. When I change the previous value and put a new value, the console.log(Updated Items:, updatedItems); prints correctly in the browser inspect, but the value is not showing in the UI.

const MyTable: React.FC = () => {
  const [items, setItems] = useState < ExampleDataItem[] > ([]);
  const [columns, setColumns] = useState < IColumn[] > ([]);
  const [editableItemId, setEditableItemId] = useState < number | null > (null);

  //double click
  const handleDoubleClick = (item: ExampleDataItem) => {
    console.log('handleInputChange called, double click', item);
    setEditableItemId((prevId) => (prevId === item.id ? null : item.id));
  };

  //edit render function
  const renderEditableColumn = (item: ExampleDataItem) => (
    editableItemId === item.id ? ( <
      input type = 'text'
      value = {
        item.editedTitle ? ? item.title
      }
      onChange = {
        (e) => handlerInputChange(e, item.id)
      }
      onKeyDown = {
        (e) => handleInputKeyDown(e, item.id)
      }
      />
    ) : ( <
      span onDoubleClick = {
        () => handleDoubleClick(item)
      } > {
        item.title
      } <
      /span>
    )
  );

  //handlee input change
  const handlerInputChange = (e: React.ChangeEvent < HTMLInputElement > , itemId: number) => {
    console.log('handleInputChange called, value changing', e.target.value);
    const updateItems = items.map((item) =>
      item.id === itemId ? { ...item,
        editedTitle: e.target.value
      } : item
    );
    setItems(updateItems);
  }

  // handle input key down
  const handleInputKeyDown = (e: React.KeyboardEvent < HTMLInputElement > , itemId: number) => {
    console.log('handleInputKeyDown called, new gg');
    if (e.key === 'Enter') {
      setItems((prevItems) => {
        const updatedItems = prevItems.map((item) =>
          item.id === itemId ?
          { ...item,
            title: item.editedTitle ? ? item.title,
            editedTitle: undefined
          } :
          item
        );
        console.log('Updated Items:', updatedItems);
        return updatedItems;
      });
      setEditableItemId(null);
      // forceUpdate();
    }
  };


  useEffect(() => {
    const fetchData = async() => {
      const data = await fetchExampleData();
      console.log(data.length);
      setItems(data);

      const newColumns: IColumn[] = [{
          key: 'id',
          name: 'User ID',
          fieldName: 'id',
          minWidth: 80,
          maxWidth: 120,
          isResizable: true
        },
        {
          key: 'title',
          name: 'Case Title',
          fieldName: 'title',
          minWidth: 150,
          maxWidth: 250,
          isResizable: true,
          onRender: renderEditableColumn
        },
        {
          key: 'userId',
          name: 'Case Number',
          fieldName: 'userId',
          minWidth: 80,
          maxWidth: 120,
          isResizable: true,
          onRender: renderCenteredColumn
        }
      ];

      setColumns(newColumns);
    };

    fetchData();
  }, [editableItemId]);

  return ( <
    div className = "my-table-container" >
    <
    DetailsList key = {
      items.length
    }
    items = {
      items
    }
    columns = {
      columns
    }
    setKey = "set"
    ariaLabelForSelectionColumn = "Toggle selection"
    ariaLabelForSelectAllCheckbox = "Toggle selection for all items"
    checkButtonAriaLabel = "select row" /
    >
    <
    /div>
  );
};

export default MyTable;