Location Input

<FormField
              control={form.control}
              name="select_country"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Select Country</FormLabel>
                  <FormControl>
                  <LocationSelector
                    onCountryChange={(country) => {
                      const currentValue = form.getValues(field.name)
                      const currentState =
                        Array.isArray(currentValue) && typeof currentValue[1] === "string"
                          ? currentValue[1]
                          : ""
                      form.setValue(field.name, [country?.name || '', currentState], {
                        shouldValidate: true,
                        shouldDirty: true,
                        shouldTouch: true
                      })
                    }}
                    onStateChange={(state) => {
                      const currentValue = form.getValues(field.name)
                      const currentCountry =
                        Array.isArray(currentValue) && typeof currentValue[0] === "string"
                          ? currentValue[0]
                          : ''
                      form.setValue(field.name, [currentCountry, state?.name || ''], {
                        shouldValidate: true,
                        shouldDirty: true,
                        shouldTouch: true
                      })
                    }}
                  />
                  </FormControl>
                  <FormDescription>If your country has states, it will be appear after selecting country</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />