File upload - React-Query

  import { useMutation, useQueryClient } from 'react-query';
    const queryClient = useQueryClient();
  
  const handleFileChange = event => {
    setBookName(event.target.files[0].name);
    setSelectedBook(event.target.files[0]);
  };

  const handleFileUpload = event => {
    event.preventDefault();

    let formData = new FormData();
    formData.append('file', selectedBook);
    formData.append('file', bookName);

    handleFileUploadMutation.mutate(formData);
  };

  const showPhotosFromUnsplash = () =>
    setShowImagePicker(prevState => !prevState);

  //======================= Book upload Mutation Function

  const handleFileUploadMutation = useMutation(
    payload => () =>
      axios
        .post('https://httpbin.org/post', payload, {
          onUploadProgress: progressEvent => {
            const percentageCompleted =
              Math.round(progressEvent.loaded * 100) / progressEvent.total;
            setCompleted(percentageCompleted);
            setTimeout(() => setCompleted(0), 5000);
          },
        })
        .then(res => console.log(res.data)),
    {
      onMutate: async payload => {
        const [file, filename] = payload.getAll('file');
        const url = URL.createObjectURL(file);
        const oldBooks = queryClient.cancelQueries('books');
        queryClient.setQueryData('books', old => [
          ...(old ?? []),
          {
            title: payload.title,
            author: payload.author,
            description: payload.description,
            selectedImg: selectedImg,
          },
        ]);
        return oldBooks;
      },

      onError: (err, variables, recover) =>
        typeof recover === 'function' ? recover() : null,

      onSuccess: data => queryClient.setQueryData('books', data),
    }
  );