Antd select freezes the UI on async option load - react

Question

On search iam sending axios call to get the options but the UI frizzes until the response return even if i clicked outside the select to defocus it, this is my code: iam using async/await on axios get to fetch data

const DebounceSelect = ({ fetchOptions, debounceTimeout = 800, renderedOptions, hasError, ...props }) => {
const [options, setOptions] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const fetchRef = useRef(0);
const debounceFetcher = useMemo(() => {
    const loadOptions = value => {
        fetchRef.current += 1;
        const fetchId = fetchRef.current;
        setOptions([]);
        setIsLoading(true);
        fetchOptions(value).then(newOptions => {
            if (fetchId !== fetchRef.current) {
                return;
            }
            setIsLoading(false);
            setOptions(newOptions);
        });
    };

    return debounce(loadOptions, debounceTimeout);
}, [fetchOptions, debounceTimeout]);

return (
    <Select
        onSearch={debounceFetcher}
        className={`${ClassNames.DebounceSelect} ${hasError ? ClassNames.hasError : ''}`}
        loading={isLoading}
        options={options}
        {...props}>
        {renderedOptions(options)}
    </Select>
);

};

Answer 1

The issue wasn't with Antd select, I was using async-await outside redux. moving the async-await inside redux thunk action fixed it.