When using Zod for form validation in React, you need to extract error messages from the result of schema validation. Zod's safeParse method returns an object with either a success property set to true or, if validation fails, an error property containing detailed information about what went wrong. To access the error messages, check if success is false and then use the error.format() method. This method provides a structured object where each field with an error will have a message property containing the relevant error message.

After extracting error messages, you should display them next to the corresponding form fields so users can easily identify and correct their mistakes. To do this, map the error messages to each input by referencing the field name. For example, if your form has fields for email and password, you can display the error for each field by rendering the message below the respective input. This approach ensures that users receive clear, immediate feedback about what needs to be fixed, improving the overall user experience and making your forms more accessible.