Estoy tratando de usar el botón de carga de la interfaz de usuario del material para permitir que mis usuarios carguen imágenes de perfil, por lo que se ve así:

 <label htmlFor='icon-button-file'> <Input accept='image/*' id='icon-button-file' type='file' onChange={handleCaptureChange('profileImg')} /> <IconButton color='secondary' aria-label='upload picture' component='span' > <StyledUploadButton /> </IconButton> </label>

y esto:

 const handleCaptureChange = (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => { setValues({ ...values, [prop]: event.target.value }) }

la URL que recibo cada vez que lo intento y selecciono una imagen será así: C:\fakepath\b062f046-fcb5-4c99-bd19-1fff9c11efed.jpg y esta imagen está en mi escritorio, eso es raro, ¿cómo debo obtener la ubicación correcta de la imagen?