MUI upload component form

upload-area.tsx

import { Snackbar, TextField, Alert } from '@mui/material';
import LoadingButton from '@mui/lab/LoadingButton';

import Box from '@mui/system/Box';
import { ChangeEvent, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';

const defaultBlob = new Blob();
export function UploadComponent() {
  const {
    register,
    getValues,
    resetField,
    setValue,
    formState: { isValid },
  } = useForm({ defaultValues: { fileId: '', uploadCSVfile: defaultBlob } });

  const { fileId } = getValues();
  const [open, setOpen] = useState(false);

  const { mutate, isSuccess, isError, isLoading, error } = useReactQueryMutation();

  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
    const maybeFile = e.target?.files?.[0];
    const reader = new FileReader();

    if (maybeFile) {
      reader.onload = function (e) {
        const CSVBlob = new Blob([
          new Uint8Array(e.target?.result as ArrayBuffer),
        ]);
        setValue('uploadCSVfile', CSVBlob);
        mutate({
          data: {
            body: JSON.stringify({ fileId }),
            file: CSVBlob,
          },
        });
      };
      reader.readAsArrayBuffer(maybeFile);
    }
  };
  useEffect(() => {
    if (isSuccess) resetField('fileId');
  }, [isSuccess]);

  useEffect(() => {
    setOpen(isSuccess || isError || isLoading);
  }, [isSuccess, isError, isLoading]);

  const handleClose = (
    event?: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if (reason === 'clickaway') {
      return;
    }
    setOpen(false);
    resetField('uploadCSVfile');
  };

  return (
    <Box sx={{ display: 'flex', p: 2 }}>
      <form>
        <TextField
          {...register('fileId', {
            required: true,
          })}
          label="File ID"
          size="small"
          sx={{ m: 1 }}
        />
        <LoadingButton
          variant="contained"
          component="label"
          sx={{ m: 1 }}
          disabled={!isValid}
          loading={isLoading}
        >
          Upload
          <input
            {...register('uploadCSVfile')}
            type={'file'}
            accept={'.csv'}
            hidden
            onChange={handleOnChange}
          />
        </LoadingButton>
      </form>
      <Snackbar
        open={open}
        onClose={handleClose}
        autoHideDuration={3000}
        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      >
        <Box>
          {isLoading && (
            <Alert onClose={handleClose} severity="info">
              Uploading, may take a while!
            </Alert>
          )}
          {isSuccess && (
            <Alert onClose={handleClose} severity="success">
              CSV file uploaded!
            </Alert>
          )}
          {isError && (
            <Alert onClose={handleClose} severity="error">
              <pre>
                {`Upload failed!
              ${
                error.response?.data &&
                `${JSON.parse(JSON.stringify(error.response.data))['message']}`
              }`}
              </pre>
            </Alert>
          )}
        </Box>
      </Snackbar>
    </Box>
  );
}

export default UploadComponent;