How to loop over array of objects in JSX?

I'm new to React and I'm using JSX with it and I need a way to loop over the array of objects that I have. I used map method, but it gives me this error in the console: TypeError: boxes.map is not a function where boxes is the array containing objects.

Here is my FaceRecognitionList component code:

import React from 'react';
import FaceRecognition from './FaceRecognition';

const FaceRecognitionList = ({ imageUrl, boxes }) => {
    console.log(boxes)
    return (
        <div>
            {
                boxes.map((box, i) => {
                    return (
                    <FaceRecognition
                    key={i}
                    left={boxes[i].leftCol} 
                    top={boxes[i].topRow} 
                    right={boxes[i].rightCol}
                    bottom={boxes[i].bottomRow}
                    imageUrl={imageUrl}
                    />
                );
            })
        }
        </div>
    );
}
export default FaceRecognitionList;