Implementing select currency picker not working

Question

I am using react-select-currency and it is giving me : Unhandled Runtime Error TypeError: _this.props.onChange is not a function. Steps: I created a new file named react-select-currency.d.ts in my project's types directory Package : https://www.npmjs.com/package/react-select-currency

 <FormField
             control={form.control}
             name="currency_type"
             render={({ field }) => (
                                 <FormItem className="md:col-span-1 ">
                                                    
                                 <FormLabel>Currency</FormLabel>
                                   <SelectCurrency
                                     onCurrencySelected={(selectedValue: string) => {
                                                            console.log("Selected Value: ", selectedValue);
                                                            // field.onChange(selectedValue);
                                                        }}
                                     value={field.value}
                                     className="w-full"
                                     key={field.value}
                                                    />
                                  <FormMessage />
                                 </FormItem>
                                )}
                              />

I tried the documentation still not working for me. Can anyone help me out here.

Answer 1

I Implemented custom currency picker and using react-flag-kit for Flag Ui Sample code, as this code gives me more flexibility than any package.

export const currencies = [
    { currency: "USD", countryName: "United States", symbol: "$", iso: "US" },
    { currency: "AFN", countryName: "Afghanistan", symbol: "؋", iso: "AF" },
    { currency: "ALL", countryName: "Albania", symbol: "L", iso: "AL" },
      Add more here...
}

Code example to use it is as follows:

<Combobox data={currencies.map((currency: CurrencySelector) =>
                           ({ value: currency.currency, label: ( <FlagIcon code={currency.iso as FlagIconCode} /> {currency.countryName} ({currency.currency}) ), }))}
                            onSelect={(selectedValue) => {
                                                    field.onChange(selectedValue);
                                     }}
                            defaultValue={field.value}
/>