Hola chicos, estoy tratando de editar el campo de entrada a continuación y no puedo. Obtengo algunos datos de un servidor y pongo estos datos en el value de la entrada. La idea es que hagamos clic en el ícono para permitir que el campo sea editable pero aún no se puede editar.

Esta es la input con accesorios personalizados:

 <input {...field} // required={props.required} disabled={props.disabled} value={props.value} type={props.type} autoComplete={props.autoComplete} pattern={props.pattern} className={`mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm rounded-md ${ error ? 'border-red-500' : 'border-gray-500' } ${ props.disabled ? 'disabled:shadow-none disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200' : 'border-gray-500' } `} />

Y aquí es donde realmente lo estoy usando. Entonces, una vez que hago clic en el ícono, su valor se vuelve realidad, pero no puedo editar dentro del valor que ya regresa del servidor.

 const [agent, setAgent] = useState<EstateAgentResponse | null>(null) const [enableField, setEnableField] = useState<boolean>(false) useEffect(() => { const fetchData = async () => { try { const { id } = params const agentUsers = await getEstaAgentUsers(parseInt(id!, 10)) const agent = await getEstateAgentById(parseInt(id!, 10)) setAgentUsers(agentUsers) setAgent(agent) } catch (error) { // ToDo: // We should handle the error message toast.error(`${error}`) } } fetchData() }, []) const handleInputField = () => { setEnableField(!enableField) } <PencilAltIcon className="block h-4 w-4" aria-hidden="true" onClick={handleInputField} /> <InputField name="businessName" label="Business name" disabled={!enableField} value={agent?.businessName} type="text" rules={{ required: 'This is required', }} />