Images from upload folder are not displaying in react - reactjs

Question

I am working on my first ever MERN stack web app. I have used multer on my Node Js backend to upload files from my React frontend. I have been storing the files in the uploads folder which is outside of the frontend folder. I have been saving the image path in my MongoDB database. The idea was to use the image path to insert the image into my React frontend. The path stored in MongoDB is correct and images are also added in the uploads folder but they are not sowing on the frontend. I am actually storing paths of three images in an array using the same function. Below is my code
the image uploading function
const handleImageupload = async (event, Img1, Img2, Img3) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append("image", file);
try {
setUploadLoading(true);
setUploadError(null);
const config = {
headers: {
"Content-type": "multipart/form-data",
// Authorization: `Bearer ${userInfo.token}`,
},
};
const { data } = await axios.post(
"http://localhost:5000/api/uploads/image",
formData,
config
);
if (Img1) {
setImage1(data.fileName);
}
if (Img2) {
setImage2(data.fileName);
}
if (Img3) {
setImage3(data.fileName);
}
setUploadLoading(false);
} catch (error) {
const errorMessage = error.response
? error.response.data.message
: error.message;
setUploadLoading(false);
setUploadError(errorMessage);
}
};
backend route of uploads
import express from "express";
import multer from "multer";
const router = express.Router();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads/");
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
const fileName =
file.fieldname + "-" + uniqueSuffix + path.extname(file.originalname);
cb(null, fileName);
},
});
const checkFileType = function (file, cb) {
const types = /jpg|png|jpeg/;
console.log(file.fieldname, file.fileName);
const isValidType = types.test(path.extname(file.originalname).toLowerCase());
const isValidMime = types.test(file.mimetype);
if (isValidType && isValidMime) {
cb(null, true);
} else {
cb(null, false);
}
};
const upload = multer({
storage: storage,
fileFilter: function (req, file, cb) {
checkFileType(file, cb);
},
});
router.post("/image", upload.single("image"), function (req, res) {
console.log(req.file);
res.json({ fileName: `/uploads/${req.file.filename}` });
});
export default router;
server.js
import dotenv from "dotenv";
import path from "path";
import colors from "colors";
import cors from "cors";
import { errorHandler, notFoundHandler } from "../middlewares/errorHandler.js";
import ConnectDb from "../config/db.js";
import laptopRoutes from "../routes/laptops.js";
import userRoutes from "../routes/userRoutes.js";
import uploadRoutes from "../routes/uploads.js";
import imagesRoutes from "../routes/images.js";
import orderRoutes from "../routes/order.js";
dotenv.config();
ConnectDb();
const app = express();
app.use(cors());
app.use(express.json());
app.get("/check", (req, res) => {
res.json({ message: "Api was called" });
});
app.use("/api/products", laptopRoutes);
app.use("/api/users", userRoutes);
app.use("/api/orders", orderRoutes);
app.use("/api/carouselimages", imagesRoutes);
app.use("/api/uploads", uploadRoutes);
const __dirname = path.resolve();
app.use("/uploads", express.static(path.join(__dirname, "/uploads")));
app.use(notFoundHandler);
app.use(errorHandler);
const port = process.env.PORT | 5000;
const mode = process.env.MODE;
app.listen(port, () => {
console.log(
`Application is running at port no ${port} in ${mode} mode`.inverse.cyan
);
});