use with formik about chakra-react-select HOT 4 CLOSED

import { FormControl, FormLabel, FormHelperText, Box } from '@chakra-ui/react';
import { FieldProps } from 'formik';
import { Select } from "chakra-react-select";
import { AccountList, AccountOut } from '@/types';
import { getData} from '@/api';

interface Option{
    value: string
    label: string;
}

type OptionList= Array<Option>;

export const AsyncSelect = ({
    field,
    form: { setFieldValue },
    ...props
}: FieldProps) => {

    const { data, isLoading, error } = getData();

    const defaultValue = (options: OptionList, value: string) => {
        return options ? options.find(option => option.value === value) : ""
    }

    return (
        <FormControl>
            <FormLabel>Some label</FormLabel>
            <FormHelperText>Start typing</FormHelperText>
            {isLoading ? (
                <div>Loading</div>
            ) : error ? (
                <div>Error</div>
            ) : data ? (
                <Box>
                    <Select
                        defaultValue={defaultValue(data, field.value)}
                        placeholder="Select an value..."
                        options={data}
                        onChange={
                            (option: Option) => setFieldValue(field.name, option.value)
                        }
                    />
                </Box>
            ) : null}
        </FormControl>
    )
};