Cada vez que escribo, pierdo el foco del texto de entrada. Tengo otros componentes que funcionan bien; pero este está perdiendo el foco. ¿Alguna idea de por qué sucedería esto?

Intenté crear componentes separados y renderizarlos en mi conmutador, pero aún no funcionó.

Tengo otros componentes renderizados con instrucciones Switch y funcionan bien.

 const FactionDetail = ({Faction}) => { const [tab, setTab] = React.useState(0) const [selectedMember, setSelectedMember] = React.useState(null) const [receipt, setReceipt] = React.useState('') const [selectedRank, setSelectedRank] = React.useState(null) const [newRankDetails, setNewRankDetails] = React.useState({ rankName: '', wage: 0, hasPerm: false }) const menuOption = (tabId) =>{ setTab(tabId) } const selectMember = (e) =>{ setSelectedMember(e) } const renderDropdownOptions = () =>{ let i = 0 for (const rank in Faction.ranks){ i++ return <option key = {i} value = {rank}>{rank}</option> } } React.useEffect(() =>{ if(selectedMember != null && selectedRank != selectedMember.rank){ setSelectedRank(selectedMember.rank) } }, [selectedMember]) const RightBody = () =>{ switch(tab){ case 0: // Dashboard return <> </> case 1: //Members return <> </> case 2: //Manage return <> <div className ='CreateRanks'> <label>Rank Name</label> <input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, rankName: e.target.value}})} value = {newRankDetails.rankName}></input> <label>Wage</label> <input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, wage: e.target.value}})} value = {newRankDetails.wage}></input> <label>Has Perm</label> <input type="checkbox" onChange = {(e) => setNewRankDetails((prev) => {return {...prev, hasPerm: e.target.checked}})} value = {newRankDetails.hasPerm} /> <button onClick = {() =>{ updateClient('factions:createNewRank', newRankDetails)}}>Create</button> </div> </> default: return<>{tab}</> } }