Getting Uncaught TypeError: boxes.map is not a function

not sure what i am doing wrong but when i am trying to detect a face in my app I am getting the below error message

what am i doing wrong? see code below

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

const FaceRecognition = ({ imageUrl, boxes }) => {
  return (
    <div className='center ma'>
      <div className='absolute mt2'>
        <img id='inputimage' alt='' src={imageUrl} width='500px' heigh='auto' />
        {boxes.map((box, i) => {
          return (
            <div
              key={i}
              className='bounding-box'
              style={{ top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol }}></div>
          );
        })}
      </div>
    </div>
  );
};

export default FaceRecognition;

boxes is probably not an array. console.log(boxes) before you return your JSX to see what boxes actually is