Mapped props not displaying on storybook

Question

I have a project that shows a table (BidTypesList.jsx), each row in the table has its own data (BidType.jsx). The table row is one component, which I should be able to reuse in the BidTypesList.jsx component. The BidType.jsx component is working as expected via storybook. However, I am supposed to pass an array to the BidTypesList.jsx which would change the props on each table row.

Here is what I have for the BidType.jsx

import React from "react";
import PropTypes from "prop-types";
import { GiCloudDownload } from "react-icons/gi";
import { FaAngleDoubleRight } from "react-icons/fa";
import { MdClose } from "react-icons/md";

export const BidType = ({
  id,
  airline,
  fleet,
  seat,
  domicile,
  status,
  numBidPeriods,
  importedOn,
}) => {
  const displayStatus = status === 1 ? "importing" : "Current";
  const seatName = seat === "FO" ? "FIRST OFFICER" : "CAPTAIN";

  return (
    <tr className="align-middle">
      <td>{id}</td>
      <td>
        {seatName} {domicile} {fleet}
      </td>
      <td className="text-center">{displayStatus}</td>
      <td className="text-center">{numBidPeriods}</td>
      <td className="text-center">{importedOn}</td>
      <td className="d-grid gap-2 ">
        <button className="btn btn-primary btn-sm bg-light">
          <GiCloudDownload /> Retry Import
        </button>
        <button className="btn btn-primary btn-sm bg-light" disabled>
          Bid Periods <FaAngleDoubleRight />
        </button>
        <button className="btn btn-primary btn-sm bg-light" disabled>
          Import History <FaAngleDoubleRight />
        </button>
        <button className="btn btn-danger btn-sm">
          <MdClose /> Delete
        </button>
      </td>
    </tr>
  );
};

BidType.propTypes = {
  id: PropTypes.number,
  airline: PropTypes.string,
  fleet: PropTypes.string,
  seat: PropTypes.string,
  domicile: PropTypes.string,
  status: PropTypes.number,
  numBidPeriods: PropTypes.number,
  importedOn: PropTypes.string,
};

Here is what I have for BidTypesList.jsx

import React from "react";
import PropTypes from "prop-types";
import { BsFunnelFill } from "react-icons/bs";
import { MdOutlineAdd } from "react-icons/md";
import { LuRefreshCcw } from "react-icons/lu";
import { BidType } from "../BidType/BidType";

export const BidTypesList = ({ bidTypeData }) => {
  return (
    <div className="container">
      <table className="table table-striped">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Bid Types</th>
            <th scope="col" className="text-center">
              Status
            </th>
            <th scope="col" className="text-center">
              # Bid Periods
            </th>
            <th scope="col" className="text-center">
              Last Import
            </th>
            <th scope="col" className="col-2 text-end">
              <BsFunnelFill className="icon-color" />{" "}
              <MdOutlineAdd className="icon-color" />{" "}
              <LuRefreshCcw className="icon-color" />
            </th>
          </tr>
        </thead>
        <tbody>
          {bidTypeData &&
            bidTypeData.map((args, i) => {
              return <BidType key={i} {...args} />;
            })}
          <BidType
            bidTypeData={[
              {
                id: "1",
                airline: "AA",
                fleet: "737",
                seat: "FO",
                domicile: "GEG",
                status: "0",
                numBidPeriods: "1",
                importedOn: "Nov 12 2022 12:00AM",
              },
            ]}
          />
          <BidType
            id={"2"}
            fleet={"73G"}
            seat={"FO"}
            domicile={"LAX"}
            status={"1"}
            numBidPeriods={"1"}
            importedOn={"Nov 1 2017 12:00AM"}
          />
        </tbody>
      </table>
    </div>
  );
};

BidTypesList.propTypes = {
  bidTypeData: PropTypes.array,
};

Most of the props passed in on BidTypesList.jsx are not showing up in storybook. The only 2 that are are the seat and status, which are passed through the if then statement in BidType.jsx.

The hardcoded entry is showing up. I've tried this instead

{bidTypeData?.map((args, i) => {
            return <BidType key={i} {...args} />;
          })}

That didn't change anything. I've also tried just the bidTypeData.map but that threw an error of map undefined.

What am I missing?