TypeError: post._id is undefined

I am learning NextJS, and I have encountered the following error:

const QuoteCard = ({ post }) => {
  const handleEdit = (post) => {
    router.push(`/update-quote/${post._id.toString()}`);
  };

  const handleDelete = async (post) => {
    const hasConfirmed = confirm(
      "Are you sure you want to delete this quote?"
    );

    if (hasConfirmed) {
      try {
        await fetch(`/api/quote/${post._id.toString()}`, {
          method: "DELETE",
        });

        const filteredPosts = myPosts.filter((item) => item._id !== post._id);

        setMyPosts(filteredPosts);
      } catch (error) {
        console.log(error);
      }
    }
  };
};

Whenever I try to invoke the handleEdit or handleDelete functions:

<div className="mt-5 flex flex-row items-center justify-center gap-4 border-t pt-3">
  <p className="button p-3 bg-gray-900 text-gray-100 text-sm cursor-pointer w-full" onClick={handleEdit}>
    Edit
  </p>
  <p className="button p-3 bg-red-600 text-gray-100 text-sm cursor-pointer w-full" onClick={handleDelete}>
    Delete
  </p>
</div>

I get an error saying post._id is not defined. Every other function involving ‘post’ is working fine however.

I tried logging post to the console and it does have an ‘_id’ attribute, what could the problem be?