So, I'm working on a Next.js application that keeps track of people's job applications. I created a route handler (api/jobs) and I created a page.tsx, where I call the route handler. But for some reason, every time I call the route handler I get an error. Specifically, the my catch part of my try catch block gets called.

Does anyone have any ideas why?
There's only 3 errors I think it could be due to:
1. I'm not calling the route handler correctly
2. I'm not destructuring the JSON correctly in the route handler
3. An issue with prisma

// app/page.tsx
const [jobURL, setJobURL] = useState('');
const [name, setName] = useState('');
const [company, setCompany] = useState('');
const [jobID, setJobID] = useState('');
const [datePosted, setDatePosted] = useState('');
const [dateApplied, setDateApplied] = useState('');
const [status, setStatus] = useState('Applied');

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    try {
      const response = await fetch('/api/jobs', {
        method: 'POST',
        body: JSON.stringify({
          jobPost: jobURL,
          name: name,
          company: company,
          jobID: jobID,
          datePosted: datePosted,
          dateApplied: dateApplied,
          status: status,
        }),
      });
    } catch (error) {
      console.error(error);
    }
}

// app/api/jobs/route.ts
export async function POST(req: Request) {
  try {
    const { jobPost, name, company, jobID, datePosted, dateApplied, status } =
      await req.json();
    const result = await prisma.job.create({
      data: {
        jobPost: jobPost,
        name: name,
        company: company,
        jobID: jobID,
        datePosted: datePosted,
        dateApplied: dateApplied,
        status: status,
      },
    });
    return Response.json(result);
  } catch (error) {
    // Everytime I call the route handler, this part gets called
    return new Response(`Error ${error}`, {
      status: 500,
    });
  }
}