Will not work if we pass value externally or like as sample given for hook form

[imdkbj]

Error and that is expected

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

import { useFormContext } from 'react-hook-form'
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form'
import { DatetimePicker } from './date-time-input'

export default function HookDateTime({
  name,
  label,
  description,
  isVisible = true
}: {
  name: string
  label?: string
  description?: string
  isVisible?: boolean
}) {
  const form = useFormContext()
  if (!isVisible) {
    return null
  }
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          {label && <FormLabel>{label}</FormLabel>}
          <FormControl>
            <DatetimePicker
              {...field}
              format={[
                ['months', 'days', 'years'],
                ['hours', 'minutes', 'seconds', 'am/pm']
              ]}
            />
          </FormControl>
          <FormDescription>{description}</FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
  )
}