I am trying to get 2 separate arrays to be able to be displayed, preferably on a single card.

Here is my current code attempting to get them on 2 separate cards that will be next to each other, but the second array.map will show

Uncaught TypeError: segmentData.map(...) is not a function

Ideally I would like to combine the info from both arrays on a single card.

return (
    (segmentData.map((segment) => (
    <Card className={classes.root}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {segment.flightNumber}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            This CardContent is wrapped in a CardActionsArea, so this text and
            the above header are wrapped in a ButtonBase, which means they
            behave like a Button.
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>

    )))

    (pricedItineraryData.map((priced) => (
      <Card className={classes.root}>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {priced.totalFare}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              This CardContent is wrapped in a CardActionsArea, so this text and
              the above header are wrapped in a ButtonBase, which means they
              behave like a Button.
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      )))
  );
};