how to upload images with cloudinary using multer memory storage?

Question

Okay so i am uploading images with multer and saving it to cloudinary, that is basically the gist of it, It was working fine on local machine cause i was saving the pictures on my laptop using multer.diskStorage( ). Since i am deploying the application, i cant save it to local machine anymore so i wanted to use multer.memoryStorage( ) to only store it in memory while it saves to cloudinary, however, it is giving me a cloudinary error of 'Missing required parameter - file'. Even after checking the multer docs, I am not sure why it is not working.

This is the upload controller using cloudinary:

const upload = async (req, res) => {
    let fileData = [];
    if (req.files) {
        // Save image to cloudinary
        let uploadedFile 
        for(let i = 0; i< req.files.length; i++){
            try {
                const localFilePath = req.files[i].path
                uploadedFile = await cloudinary.uploader.upload(localFilePath, {
                    folder: "products",
                    resource_type: "image",
                })
                fileData.push({
                    fileName: req.files[i].originalname,
                    filePath: uploadedFile.secure_url,  //going to store only the cloudinary picture link to the db
                })

            } catch (error) {
                res.status(500);
                console.log(error)
                throw new Error('Image could not be Uploaded');
            }
        }
    }
    res.json(fileData) 
}

this is the upload function on the frontend:

    const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>, files:FileList | null) => {
        stopReload(e);
        if(files === null) {
            return;
        }
        setDragActive(false);
        setUploading(true)
        const data = new FormData()
        for(let i = 0; i<files.length; i++){
          data.append('images', files[i])
        }
        try {
            const {data:images} = await axios.post('/products/upload', data, {
            headers: {'Content-Type':'multipart/form-data'}
            })
            setUploading(false)
            setAddedPhotos(prevState => [...prevState, ...images]) //would get the picture link and store it here to then add it to my db 
            console.log(addedPhotos)
        } catch (error) {
            console.log(error)
        }
    };

This is the multer function when it was working using diskStorage:

const storage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, 'uploads')
    },
    filename: function(req, file, callback){
        callback(null, uuidv4() + '-' + Date.now() + file.originalname)
    }
})

const fileFilter = (req, file, callback) => {
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png']
    if(allowedTypes.includes(file.mimetype)) {
        callback(null, true)
    }else(
        callback(null, false)
    )
}

const photoMiddleware = multer({storage, fileFilter})

module.exports = {photoMiddleware}

This is the multer function giving the error when storing in memory:

const storage = multer.memoryStorage()

const fileFilter = (req, file, callback) => {
    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png']
    if(allowedTypes.includes(file.mimetype)) {
        callback(null, true)
    }else(
        callback(null, false)
    )
}

const photoMiddleware = multer({storage, fileFilter})

module.exports = {photoMiddleware}

the upload route:

router.route('/upload').post(photoMiddleware.array('images', 100), upload)