Understanding serverside validation with zod and nextjs server actions???

Hey y'all Im trying to implement zod into my validation for a form and i want to validate on a server action but it's not returning the error for the frontend to use its just breaking the server. Am I using try catch correctly for error handling? Im a bit lost. What I'm thinking is that its not working because its on a development environment but even then I feel like it should be able to return the error. Also in the nextjs documentation they recommend using use useFormState hook, which I don't fully understand. Furthermore in there documentation they use schema.safeparse instead of using a try catch with the schema.parse. Im finding server actions super confusing, I feel like using a route handler and returning json would be 100x easier than trying to use this complex abstraction. Thanks everyone. The error image shows me trying to put in a bad input into the form and having zod catch it.