post_id not defined when comment form submitted

The comments table and the posts table are linked in my database through the forigen key post_id. I want when the comments form is submitted for the comments to then be displayed under the post on the singlepost page. This was happening until I abstracted the CommentsForm in order to allow the form to be cleared upon submisson, using a the reset react hook. Now when a comment is submitted, the form clears but no comment is displayed, as in the database the post_id of the comment is NULL.

here are all the relevent code files and snippets relating to the problem

handleComments function from ./utils

export async function handleComments(formData, post_id) {
  "use server";

  const comment = formData.get("comment");
  const username = formData.get("username");
  await sql`INSERT INTO comments01 (username, comment, post_id)
             VALUES (${username}, ${comment}, ${post_id}) `;
  console.log("comment saved");
  revalidatePath(`/allPosts/${post_id}`);
}

CommentsForm

"use client";
import { handleComments } from "./utils";
export default function CommentsForm(comments, post_id) {
  return (
    <div>
      <h4 className="text-xl font-bold mb-4">Comments</h4>
      <div className="mb-4">
        <form
          className="text-black flex"
          onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            handleComments(formData).then(() => {
              e.target.reset();
            });
          }}
        >
          <input
            name="username"
            placeholder="Username"
            value={comments.username}
            className="mr-2 px-4 py-2 border border-gray-300 rounded-md"
          />
          <input
            name="comment"
            placeholder="Comment..."
            value={comments.comment}
            className="flex-1 mr-2 px-4 py-2 border border-gray-300 rounded-md"
          />
          <button
            type="submit"
            className="px-4 py-2 bg-blue-500 text-white font-bold rounded-md hover:bg-blue-600"
          >
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

[singlePost] page

import { sql } from "@vercel/postgres";
import { notFound } from "next/navigation";
import Image from "next/image";
import { revalidatePath } from "next/cache";
import Link from "next/link";
import { HiPencilAlt } from "react-icons/hi";
import RemoveBtn from "@/app/components/RemoveBtn";
import RemoveBtnComments from "@/app/components/RemoveBtnComments";
import { handleComments } from "@/app/components/utils";
import CommentsForm from "@/app/components/CommentsForm";
export default async function Page({ params }) {
  //get single post
  console.log(params.singlePost);
  const post = (
    await sql`SELECT * FROM posts01 WHERE post_id = ${params.singlePost} `
  ).rows[0];
  const comments = (
    await sql`SELECT * FROM comments01 WHERE post_id = ${params.singlePost}`
  ).rows;
  //handle posts

  if (!post) {
    notFound();
  }
  return (
    //display posts
    <>
      {/* //div that contains all */}
      <div>
        {/* //div that contains post */}
        <div>
          <h2 className="text-2xl font-bold mb-4">{post.title}</h2>
          <div className="flex justify-end gap-5">
            {/* delete post */}
            <RemoveBtn post_id={post.post_id} />
            {/* //edit button */}
            <Link href={`${params.singlePost}/editPost`}>
              <HiPencilAlt size={24} />
            </Link>
          </div>
          <h3 className="text-lg mb-4">{post.content}</h3>
          {/* display image_url */}
          {post.image_url ? (
            <Image
              src={post.image_url}
              alt={`image of ${post.title}`}
              width={300}
              height={300}
            />
          ) : (
            <h3>Image unavailable</h3>
          )}
        </div>
        {/* //comments */}
        <div>
          <h4 className="text-xl font-bold mb-4">Comments</h4>
          <div className="mb-4">
            <CommentsForm post_id={params.singlePost} />
          </div>
          {/* //display comments */}
          <div>
            {comments.map((comment) => (
              <div
                className="bg-gray-100 rounded-md p-4 mb-4"
                key={comment.comment_id}
              >
                <p className="font-bold text-lg mb-2">{comment.username}</p>
                <div>
                  <p>{comment.comment}</p>
                </div>
                {/* delete comment */}
                <div className="flex justify-end gap-5">
                  <RemoveBtnComments comment_id={comment.comment_id} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}