Al cargar el formulario con reaccionar, los estados no se actualizan como si se actualizaran por un segundo y luego vuelven a los valores ingresados. No sé por qué sucede esto.
Gif que muestra el comportamiento del código
const [values, setValues] = useState({ // Single File upload hooks singleFile: {}, selectSingleFile: false, singleTitle: '', singleArtist: '', open: false, // Multiple File upload hooks multipleFiles: [], selectMultipleFiles: false, multipleTitle: '', multipleArtist: '', uploadStatus: Number, }); const handleSubmit = (event) => { // converting into the form object const formData = new FormData(); formData.append('title', values.singleTitle); formData.append('artist', values.singleArtist); formData.append('file', values.singleFile); // making request to the server let reqOptions = { url: '/music/singleFile', method: 'POST', data: formData, }; axios.request(reqOptions).then(function (response) { console.log(response); setValues({ ...values, uploadStatus: response.status }); }); // Setting the hook back to default values setValues({ ...values, singleFile: {}, selectSingleFile: false, singleTitle: '', singleArtist: '', open: true, }); event.preventDefault(); };const handleSubmit = (event) => { // converting into the form object const formData = new FormData(); formData.append('title', values.singleTitle); formData.append('artist', values.singleArtist); formData.append('file', values.singleFile); // making request to the server let reqOptions = { url: '/music/singleFile', method: 'POST', data: formData, }; axios.request(reqOptions).then(function (response) { console.log(response); setValues({ ...values, uploadStatus: response.status }); }).then(res =>{ // Setting the hook back to default values setValues({ ...values, singleFile: {}, selectSingleFile: false, singleTitle: '', singleArtist: '', open: true, }); }); event.preventDefault(); };Coloque su estado claro en un .entonces para que sepa con certeza que solo se borrará después de que la llamada a la API haya sido exitosa.