Estoy tratando de manejar los eventos onFocus y onBlur para 2 elementos: los elementos de input y de área de textarea . Incluso traté de implementarlo como un estado con el objeto, pero simplemente no es posible, así que lo separé en dos estados. Cada vez que intento enfocarme en el área de texto, se expandirá; sin embargo, si empiezo a enfocarme en el elemento de input , colapsará en lugar de permanecer expandido. ¿Cómo implemento esto?

 const [titleFocused, setTitleFocus] = useState(null); const [contentFocused, setContentFocus] = useState(null); function handleFocus(event) { const {name} = event.target; setTitleFocus(name === 'title' && true); setContentFocus(name === 'content' && true); } function handleUnfocus(event) { const {name} = event.target; setTitleFocus(name === 'title' && false); setContentFocus(name === 'content' && false); } return ( <div > <form className="create-note"> {titleFocused || contentFocused && ( <input name="title" onChange={handleChange} value={note.title} placeholder="Title" onFocus={handleFocus} onBlur={handleUnfocus} />) } <textarea name="content" onChange={handleChange} value={note.content} placeholder="Take a note..." onFocus={handleFocus} onBlur={handleUnfocus} rows={titleFocused || contentFocused ? "3" : "1"} /> <Zoom in={titleFocused || contentFocused} appear={true}> <Fab onClick={submitNote}> <AddIcon fontSize="large" /> </Fab> </Zoom> </form> </div> );