How to validate error in form inside next js

Hi I want to show success when the form is submitted and error's if error occur using react toastify library but unable to build logic. Can anybody help?

here the code of the form

function Form({ _id }) {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();
    const onSubmit = (data) => {
        
        fetch('/api/CreateComment', {
            method: "POST",
            body: JSON.stringify({ ...data, _id })
        })
    }
    return (<>
        <ToastContainer
            position="top-right"
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        />
        <form id='my-form' onSubmit={handleSubmit(onSubmit)}>
            <div data-aos='fade-right' data-aos-delay='100' className="overflow-hidden mt-8 mb-4 w-[90vh] mx-auto bg-gray-100 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600">
                <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"></label>
                <input {...register('name', { required: true })} type="text" id="name" className="mb-2 radius block p-2 w-full text-gray-900 bg-gray-50 rounded-lg border-gray-300 sm:text-xs dark:bg-gray-800 dark:placeholder-gray-400 dark:text-white" minLength={3} placeholder="Your Name" />
                {errors.name  && <p className='text32'>Name is required. Minimum length should be 3</p>}
                <div className="py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800" >
                    <label htmlFor="comment" className="sr-only">Your comment</label>
                    <textarea {...register('comment', { required: true })} id="comment" rows="4" minLength={5} className="px-0 w-full text-sm  text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400" placeholder="Write a comment..."></textarea>
                    {errors.comment && <p className='text32'>Minimum Comment length should be 5</p>}
                </div>
                <div className="flex justify-between items-center py-2 px-3 border-t dark:border-gray-600">
                    <button onClick={notify} type="submit" data-aos='fade-up' data-aos-delay='400' className="btnz inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
                        Post comment
                    </button>
                </div>
            </div>
        </form>
        <p data-aos='fade-left' data-aos-delay='700' className="h-[8vh] w-[70vh] m-auto text-xs text-gray-500 dark:text-gray-400">Remember, contributions to this topic should follow our <a href="#" className="text-blue-600 dark:text-blue-500 hover:underline">Community Guidelines</a>.</p>
    </>
    );
}

I want to show separate error for both and success when form submit successfully.