Problem with react-hook-form
so basically my form is submitting only one time after that i need to reload the page so it will submit and validate the form also i am using NextJS and Mantine(its a framework like bootstrap and other libs)
const methods = useForm({
resolver: zodResolver(message),
});
const {
register,
handleSubmit,
control,
reset,
setValue,
watch,
formState: { errors, isSubmitSuccessful, isSubmitting },
} = methods;<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<LoadingOverlay
visible={loading}
zIndex={1000}
overlayProps={{ radius: "sm", blur: 2 }}
/>
<Group justify="space-between">
<Title order={2}>Send a Message</Title>
<Controller
name="channel"
control={control}
render={({ field }) => (
<Select
variant="filled"
checkIconPosition="right"
placeholder="Select Channel"
data={chName}
searchable
nothingFoundMessage="No Channel Found"
error={errors && errors.channel?.message}
{...field}
/>
)}
/>
</Group>
<Textarea
className="my-3"
variant="filled"
label="Message"
withAsterisk
description="What you want to send to the Discord?"
placeholder="Hello, This is a message sent from Test Bot Dashboard Website"
autosize
minRows={5}
error={errors && errors.content?.message}
{...register("content")}
/>
<EmbedBuilder
register={register}
errors={errors}
setValue={setValue}
control={control}
isSubmitSuccessful={isSubmitSuccessful}
watch={watch}
/>
<Button type="submit" disabled={isSubmitting}>
Send
</Button>
</form>
</FormProvider>