Tengo un componente de entrada de archivo personalizado, que creé para mostrar la imagen precargada cuando la persona carga su archivo.

Pero el problema es que estoy usando este componente tres veces, e independientemente de la entrada que elija cargar, solo la primera entrada se ve afectada y se vuelve a renderizar. ¿Alguien se enfrentó a esto? ¿Debo usar nombres personalizados para las variables de useState()?

La entrada personalizada:

 const ImageInput = ({ name, register, registerName }: ImageInputProps) => { const [hasFileUploaded, setHasFileUploaded] = useState(false); const [currentFile, setCurrentFile] = useState(null); const handleImageChange = (e : React.FormEvent<HTMLInputElement>) => { setHasFileUploaded(true); } return ( <div className="input_box"> <input type="file" id="file" className="ImageInput" {...register(registerName)} onChange={(e) => handleImageChange(e)} /> <label htmlFor="file" > { hasFileUploaded ? ( <> <FontAwesomeIcon icon={faFighterJet} /> <p className="input_file_p">{name}</p> </> ) : ( <> <FontAwesomeIcon icon={faCamera} /> <p className="input_file_p">{name}</p> </> ) } </label> </div> ) };

Cómo lo estoy usando:

 <div className="fc_center_images"> <div> <ImageInput name="Frente CREA" register={register} registerName="cadastro-frente-crea" /> </div> <div> <ImageInput name="Verso CREA" register={register} registerName="cadastro-verso-crea" /> </div> <div> <ImageInput name="Selfie c/identidade" register={register} registerName="cadastro-selfie" /> </div> </div>