Upload image to the cloudinary server

First of all you will require signature to upload the file

import {v2 as cloudinary} from 'cloudinary';
export default async function handler(req, res) {
    const cloudinary_config=cloudinary.config({
        cloud_name:process.env.CLOUD_NAME,
        api_key:process.env.CLOUD_API_KEY,
        api_secret:process.env.CLOUD_API_SECRET,
        secure:true        
    });

    const timestamp=Math.round(new Date().getTime()/100);
    const signature = cloudinary.utils.api_sign_request({
        timestamp:timestamp,
        folder: req.query.folder   
    },
    cloudinary_config.api_secret
    )
    res.json({timestamp, signature});
  }

After that you can use submit handler 

const uploadImage=async ()=>{
        const folder="sections";        
        const signature = await axios.get(`http://localhost:3000/api/sign?folder=${folder}`);
        
        const data=new FormData();
        data.append("file", image);
        data.append("signature",signature.data.signature);
        data.append("timestamp", signature.data.timestamp);
        data.append("api_key", "773134234173448");
        data.append("folder", folder);        
        axios.post("https://api.cloudinary.com/v1_1/dsqxw0rfb/image/upload", data,{
            headers: { "Content-Type": "multipart/form-data" },
            onUploadProgress:function(uploadEvent){
                
                setProgress({
                loaded:uploadEvent.loaded,
                total:uploadEvent.total,
                show: true
                })                
                
            }
        })
        .then(async function(res){
            // console.log(res.data.url);    
            await updateImageMutation.mutate({
              id:id,
              image:res.data.url
            });        
        })       
        .catch(function(err){
            console.log(err);
        }) 
    }