React Hook Form

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@heroui/react';
import { HeroTelInput, matchIsValidTel } from '@hyperse/hero-tel-input';
import { Controller, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import z from 'zod';
 
const LoginFormSchema = z.object({
  phoneNumber: z
    .string({
      message: 'The phone number is required.',
    })
    .superRefine((phoneNumber, ctx) => {
      if (!matchIsValidTel(phoneNumber)) {
        ctx.addIssue({
          code: 'custom',
          message: 'The phone number is invalid.',
        });
      }
    }),
});
 
const App = () => {
  const { handleSubmit, control } = useForm<LoginFormSchema>({
    resolver: zodResolver(ResetPwdSchema),
    defaultValues: {},
  });
 
  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="phoneNumber"
        control={control}
        render={({
          field: { ref: fieldRef, value, ...fieldProps },
          fieldState,
        }) => (
          <HeroTelInput
            {...fieldProps}
            value={value ?? ''}
            ref={fieldRef}
            langOfCountryName="en"
            defaultCountry="CN"
            preferredCountries={['CN']}
            errorMessage={fieldState.error?.message}
            isInvalid={fieldState.invalid}
          />
        )}
      />
      <div>
        <Button type="submit" variant="contained" sx={{ mt: 2 }}>
          Submit
        </Button>
      </div>
    </form>
  );
};