How to fix or identify the issue by using (fetch) reactjs and nodejs api?

How can I fix upload image issue ?

There is something wrong in my logic.

I have developed a service in NodeJs by using sharp api.

When I select some image at first time then everything works fine and image upload successfully.

but When I try to crop that image after clicking on the image and try to save then code works fine but after the execution of flow, browser reloaded its due to some reason and didn't update the image list.

I don't why it is being happened, I tried to debug the service code and It didn't stop at anywhere. Flow has been passed/executed successfully, I didn't catch any exception/error in code.

What can be the issue in it?

Problem area is in the code of onSaveImage when a server side call is being served/requested. Browser get refresh/reload after this function call (onSaveImage).

I am sharing my nodejs service code . please look into it. Thank you. My client side code can be seen at here. I tried to give demonstration at below link.

https://codesandbox.io/s/vigorous-heisenberg-vbdwo?file=/src/EditImageSlider.js

-----------------package.json of nodejs
{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "body-parser": "^1.19.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "express-validator": "^6.12.0",
        "handlebars": "^4.7.7",
        "jsonwebtoken": "^8.5.1",
        "mysql": "^2.18.1",
        "nodemailer": "^6.6.1",
        "nodemon": "^2.0.12",
        "sharp": "^0.29.3"
    },
    "devDependencies": {},
    "scripts": {
        "start": "nodemon --inspect index.js",
        "debug": "node --nolazy --inspect-brk=9229 index.js"
    },
    "license": "ISC"
}

---------------------index.js--------------------------------
const express = require("express");
const app = express();
const cors = require("cors");
var fs = require("fs");
const fsp = fs.promises;
var path = require("path");
const sharp = require("sharp");
var $pathContentBuilder = path.join(__dirname, "../", "/userdata/uploads/"); // 
var $urlpathContentBuilder = "/cmsuserdata/uploads/"; // URL path

app.use(express.json({ limit: "50mb" }));
app.use(cors());
app.use(
    express.urlencoded({
        extended: true,
    })
);


function processImage(image, metadata, filename, isResizeAllow) {
    return new Promise((resolve, reject) => {
        if (isResizeAllow && isResizeAllow === true) {
            // 0.8 MB
            return image
                .resize({
                    width: Math.round(metadata.width / 2),
                    height: Math.round(metadata.height / 2),
                    fit: "cover",
                })
                .toBuffer((err, buf) => {
                    if (err) {
                        console.log("Error occured ", err);
                        return reject(err);
                    } else {
                        return resolve(buf.toString("base64"));
                    }
                });
        } else {
            return image.toBuffer((err, buf) => {
                if (err) {
                    console.log("Error occured ", err);
                    return reject(err);
                } else {
                    return resolve(buf.toString("base64"));
                }
            });
        }
    });
}


app.post("/uploaddetail", async (req, res, next) => {
    const base64Data = req.body.image;
    const filename = req.body.filename;
    let imageResizeResult = "";   
    try {
        var inputbuf = Buffer.from(base64Data, "base64"); // Ta-da     
        const image = await sharp(inputbuf);
        let metadata = await image.metadata();
        let convertedbase64Data = "";
        if (metadata && (metadata.width > 3000 || metadata.size / 1024 / 1024 > 1)) {
            // 0.8 MB
            convertedbase64Data = await processImage(image, metadata, filename, true);
        } else {
            convertedbase64Data = await processImage(image, metadata, filename, false);
        }
      
       let retResult = await fsp.writeFile($pathContentBuilder + filename, convertedbase64Data, "base64").
        then( result => {
            let resultResponse = JSON.stringify({
                success: true,
                fullurl: `${$urlpathContentBuilder}${filename}`,
                url: `${filename}`,
                imagename: `${filename}`,
                serverpath: `${$urlpathContentBuilder}`,
            });       
           
            return resultResponse;
        }).catch( err => console.log(err));

       res.status(200).json(retResult);      
        
    } catch (e) {
        console.log(e);
        const error = new HttpError(e, 404);
        return next(error);
    }
});


const port = process.env.PORT || 7001;
var server = app.listen(port, () => console.log(`Listening on port ${port}...`));

Can anyone guide me by seeing my client side as well as server side logic. Your help will be appreaciated.