this is my reminder-list.tsx, how many time i tricked it, i always fail to do that, how to fix it

i always got the TypeError: undefined is not an object (evaluating ‘reminder.map’) error

import { ReminderDetails } from "@/types/types";
import React from "react";

interface ReminderListProps {
  reminder: ReminderDetails[];
}

const ComponentReminderList: React.FC<ReminderListProps> = ({ reminder }) => {
  return (
    <tbody>
      {reminder.map((item, index) => (
        <tr key={index}>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.patient}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.medicine}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.dosage} - {item.dosage_unit}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.schedule}
          </td>
          <td className="text-[hsl(210,17%,98%)] w-[20%] font-light text-xs px-4 py-4">
            {item.notes}
          </td>
        </tr>
      ))}
    </tbody>
  );
};

export default ComponentReminderList;