How do I return the value of a .then and .catch promise two sub functions within the main function, and return it at as the output of the main function.

The code is written to upload a document to mongoDB with a photo attached.
The code works and the document is actually pushed to my mongoDB database.
However, I just want to return something once the function ends so that I can generate a proper response on my react front end.

So here's my problem:
<a href="https://i.stack.imgur.com/YbuIK.png">https://i.stack.imgur.com/YbuIK.png</a>[<a href="https://i.stack.imgur.com/YbuIK.png" target="_blank" title="New Window">^</a>]

Any idea where I went wrong here?

code base:
module.exports.createProduct = async (req, res, next) => {
	const files = req.files;
	let message;
	if(!files) {
		const error = new Error('Please choose files');
		error.httpStatusCode = 400;
		return next(error)
	}

	let imgArray = await files.map((file) => {
		let img = fs.readFileSync(file.path)
		return encode_image = img.toString('base64')
	})

	let result = await imgArray.forEach(async(src, index) => {
		
		let newProduct = new Product({
			productName: req.body.productName,
			description: req.body.description,
			price: req.body.price,
			stocks: req.body.stocks,
			addedBy: auth.decode(req.headers.authorization).email,
			filename: files[index].originalname,
			contentType: files[index].mimetype,
			imageBase64: src
		})
		
		let createNew = await newProduct.save().then(()=> {
			message = true;
			console.log(message)
			return message
		}).catch(error => {			
			if(error.name === 'MongoError' && error.code === 11000) {
				message = 'duplicate'
				console.log(message)
				return message
			} else {
				message = 'file not found'
				console.log(message)
				return message
			}
		})
		console.log(`From createNew: ${createNew}`)
		return createNew
	})	
	return result
}