When I double click my tab I cannot edit it's name

Question

Context

I have to create a new tab always when the user clicks on the plus button and then they should be able to edit it on double click. My tabs have onclick and onDoubleClick events. On the onclick I've assigned a function to get the tabs' index. I'm doing this because I'm working with the Carbon Design System Tabs component, so to get the blue mark on the bottom of the tab I need to pass the index : <Tabs selectedIndex={tabSelected}> . The new tab should have a blue mark as well.

const handleTabs = (id) => {
    const myTabSelected = tabs?.filter((tab) => tab.id === id);
    if (tabs?.length >= 1) {
      /* I'm subtracting 1 because I need the index.  */
      if (myTabSelected[0]?.id - 1 === id - 1) {
      /* [{id: 3, name: 'Tab 3'}][0]?.id -1 ===  3 - 1 */
        let myTabIndx = myTabSelected[0]?.id - 1
      
        setTabSelected(myTabIndx);
      } else {
        setTabSelected(tabs.length - 1);
      }
    } else {
      setTabSelected(0)
    }
  }

Here is my Tab component :

<Tabs selectedIndex={tabSelected}>
     <TabList activation="manual" aria-label="List of tabs">
         {tabs?.map((tab) => {
            return (          
               <div key={tab.id}>
                   <Tab 
                      onDoubleClick={() => handleEditOnDoubleClick(tab.id)}
                      onClick={() => handleTabs(tab.id)} 
                   >
                   {editing ? <input 
                               /* onChange={(e) => setEditTabsName(e.target.value)} */ 
                                  type="text" 
                                  onKeyPress={finishEditOnHittingEnter}
                                  ref={ref}
                                  defaultValue={tab.name} 
                                  className="input"/> 
                            : tab.name} 
                               <Close onClick={() => removetabs(tab.id)} size="18px" />
                   </Tab>
                </div>                      
                )
              })}

    </TabList>
 </Tabs>

I'm calling this function on onDoubleClick event:

  const [editing, setEditing] = useState(false);
  const [editTabsName, setEditTabsName] = useState("");
  const ref = useRef(null);

  const handleEditOnDoubleClick = (id) => {   
    setEditing(true);

    const newTabs = tabs?.map((tab) => {
      if(tab.id === id){
        return {...tab, name: ref.current.value}
      }
      return tab;
    });

    setTabs(newTabs);
  };

Problem

When I double click to edit the name it only changes if I double click it again. I don't know what's causing it and even after the tab is edited I'm getting bugs. For example, if I try to edit another tab the last value is assigned to that tab, which is not what I'm looking for. After editing, I want the input to close, so I'm setting false to editing state when I hit enter.

const finishEditOnHittingEnter = (e) => {
    if (e.key === 'Enter') {
      setEditing(false);
    }
  }