Как реализовать useMutation из реагирующего запроса в handleSubmit

небольшое предложение по рефакторингу :)

import React from "react";
import { useHistory } from "react-router-dom";
import { UPLOAD_PRESET, CLOUD_NAME, SERVER_API } from "../../config";

// to don't redefine this function on each rerender they can be defined out of component
const uploadImage = async file => {
    const url = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/upload`;
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", UPLOAD_PRESET);

    const res = await fetch(url, {
        method: "POST",
        body: formData,
    });

    if (!res.ok) {
        throw new Error(`Can't upload image. ${res.status}`)
    }

    const data = await res.json();
    return await data.eager[0].secure_url;
}

const createAlbum = async data => {
    const res = await fetch(`${SERVER_API}/api/v1/albums`, {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
        },
    });

    if (!res.ok) {
        throw new Error(`An error has occurred: ${res.status}`)
    }

    const json = await res.json();
    return json.data._id;
}


const Form = ({ file, loading: setLoading, setError, album, color, children }) => {
    let history = useHistory();

    const clearError = () => setError("")
    
    const handleSubmit = async e => {
        e.preventDefault();
        clearError();
        try {
            if (!file) {
                throw new Error("Please select a file to add.");
            }

            if (!album.trim() || !color.trim()){
                throw new Error("Please enter all the field values.");
            }

            setLoading(true);

            const fileUrl = await uploadImage(file);

            const data = {
                "name": album,
                "bckImgUrl": fileUrl,
                "color": color
            };

            const albumId = await createAlbum(data);

            history.push(`/albums/${albumId}`);

        } catch (error) {
            setError(error.message);
        } finally {
            setLoading(false)
        }
    }


    return <form onSubmit = {handleSubmit}>{children}</form>
}

export default Form

Что-то вроде того. Как можно проще

Codesandbox ссылка на демо

import { Fragment, useState } from "react";
import axios from "axios";
import { useMutation } from "react-query"; 

const senRequest = async () => {
  return await axios.get("https://jsonplaceholder.typicode.com/posts");
};

export default function App() {
  const [val, setVal] = useState("");
  const [result, setResult] = useState([]);

  const { mutate } = useMutation(senRequest); // if you need to send data configure it from here
  const handleSubmit = (e) => {
    e.preventDefault();
    mutate(senRequest, { // And send it in here.
      onSuccess: ({ data }) => {
        setResult(data.slice(0, 5));
      }
    });
  };
  return (
    <div className = "App">
      <form onSubmit = {handleSubmit}>
        <input value = {val} onChange = {(e) => setVal(e.target.value)} />
        <button type = "submit">Submit</button>
      </form>
      {result.map((el) => (
        <Fragment key = {el.id}>
          <div
            style = {{
              width: "100%",
              borderBottom: "1px solid gray"
            }}
          >
            <span>{el.title}</span>
            <span>{el.body}</span>
          </div>
        </Fragment>
      ))}
    </div>
  );
}