I've been fiddling with arrays and mapping them using the Array.prototype.map() fucntion and honestly i've been struggleing ALOT so i hope somebody can share some light on this.

So my goal is simple to map some headings and rows in a table in my custom component, but when i get to make the mapping its always says "variable.map() is not a function" event tho im specifying its an array and it has values im passing on from my page. I have already tested if its was because it was empty but it doesnt seem that way.

My page is simply this for now.

import AppLayout from '../../../components/AppLayout';
import Table from '../../../components/modules/Table';

export default function Products() {
  return (
    <AppLayout>
      <section className="content">
        <h3 className="text-3xl font-bold">Products</h3>
        <Table
          headings={[
            '',
            'Product',
            'Status',
            'Type',
          ]}
        />
      </section>
    </AppLayout>
  );
}

As for my table its:

export default function Table(headings = [], rows = {}) {
  const top = headings.map((value) => (
    <th
      key={value}
      scope="col"
      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
    >
      {value}
    </th>
  ));

  return (
    <div className="flex flex-col">
      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
          <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                {top}
              </thead>
              <tbody>
                {rows}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

I've had other issues with mapping arrays but this is the most one i always fail one idk why SO ANNOYING.

Thanks in advance