Untitled

import axios from 'axios';
import { ErrorMessage } from 'formik';
import { useEffect, useState } from 'react';
import Select from 'react-select';

const BlockCountrySelect = ({ name, defaultValue, setFieldValue }) => {
    const [countries, setCountries] = useState([]);
    const [selectedOptions, setSelectedOptions] = useState(defaultValue || []);

    const fetchedCountries = async () => {
        try {
            const response = await axios.get('https://trial.mobiscroll.com/content/countries.json');
            const data = response.data;
            const countries = data.map((country) => ({
                value: country.value,
                label: country.text,
            }));
            setCountries(countries);
        } catch (error) {
            console.error(error);
        }
    };

    useEffect(() => {
        fetchedCountries();
    }, []);

    useEffect(() => {
        setSelectedOptions(defaultValue || []);
    }, [defaultValue]);

    const handleSelectChange = (selectedOptions) => {
        setSelectedOptions(selectedOptions);
        setFieldValue(name, selectedOptions);
    };

    return (
        <div className="mb-10 flex flex-col">
            <Select name={name} onChange={handleSelectChange} isMulti value={selectedOptions} options={countries} />
            <ErrorMessage name={name} component="div" className="text-red-600" />
        </div>
    );
};

export default BlockCountrySelect;