Tengo un código de reacción como el siguiente (ejemplo mínimo reproducible):

 import React, { useState } from 'react'; const Todo = ({todo}) => { const [isUpdating, setisUpdating] = useState(false) const updateItemHandler = (e) => { setisUpdating(true); } return( <div onClick={updateItemHandler} className={fa ${isUpdating ? "fa-check" : "fa-pencil"}`}></div> <div id={todo.id}> <div suppressContentEditableWarning={true} contentEditable = {isUpdating}>{todo.value} </div> </div> ) } export default Todo;

Cuando hice clic en el div, cambia contentEditable a verdadero, pero también me gustaría enfocar el div recién editable al mismo tiempo. Intenté modificar mi función updateItemHandler así:

 const updateItemHandler = (e) => { setisUpdating(true); e.focus(); }

pero React arrojó un error/dijo que el enfoque no era una función aquí.

¿Hay alguna forma en que pueda enfocar automáticamente el div cuando cambio el contenido Editable a verdadero?

Gracias