Fetching images from mongoDB using mongoose, nodeJS, express, react - node.js

Question

I have been working off the following guide to upload and fetch images to and from mongoDB and am having issues getting the images to redisplay on the react page after being fetched. I think the issue is with the HTML img src but it could be further up the line so ill walk through everything I have done.
server.js
// -------------------- Mongoose schema -------------------
var imageSchema = new mongoose.Schema({
img:
{
data: Buffer,
contentType: String
}
});
const offeringSchema = new mongoose.Schema({
image: [imageSchema]
});
const Image = mongoose.model("Image", imageSchema)
const Offering = mongoose.model("Offering", offeringSchema);
// -------------------- Set up Multer -------------------
const storage = multer.diskStorage({
destination: './public/uploads/images',
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() +
path.extname(file.originalname));
}
});
// -------------------- Post Offering Data -------------------
// upload featured offering image
app.post('/admin/OfferingFeatureImage', upload.single('featuredImage'), function (req, res) {
if (req.isAuthenticated()) {
if (req.user.userData[0].admin === true) {
console.log(req.file);
var newImage = new Image();
newImage.img.data = fs.readFileSync(req.file.path)
newImage.img.contentType = 'image/png';
Offering.updateOne({ _id: req.body.offeringID }, {image:[newImage]}, function (err) {
if (err) {
console.log(err)
} else {
res.redirect("/Admin/Offerings");
}
})
} else {
res.send("not-privileged")
}
} else {
res.redirect("/login")
};
});
// -------------------- Get Offering Data -------------------
app.get("/data/allInvestment", function (req, res) {
Offering.find({}, function (err, foundOfferings) {
if (err) {
res.send(err);
} else {
res.send(foundOfferings);
};
});
});
On the client side i am able to get the offering data and see the img data appears to be present
client side data
{props.investmentsData.image[0] !== undefined &&
<img src={"data:" + props.investmentsData.image[0].img.contentType + ";base64," + props.investmentsData.image[0].img.data.toString('base64')} className="card-img-top" alt="..."></img>
}
outcome