Axios get request not performing correctly after useEffect cleanup

Question

I am writing an axios get call useEffect that is called whenever a user selects an option from a dropdown menu. It works on getting info on the first time I select each option, but whenever I go back to a previously selected option, it performs the cleanup, but does not pass, or "get", the info from the endpoint again, leading to "object is undefined" when trying to pass inside of a flatList display.

Just to be clear, I am using 'selectDrowdown' for my list of options.

useEffect(() =>{
        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();
        getGames(source);

        return () =>{
            source.cancel();
        };
    }, [selectedOpt]);

const getGames = (source) => {
        const opt = getOpt();


        axios.get(`${URL}${opt}`, {
            cancelToken: source.token
        })
        .then(function (response){
            setSelectedResults(response.data.data);
        })
        .catch((err) =>{
            if(axios.isCancel(err)){
                console.log('successfully aborted');
            }
            else{
                alert(error.message)
                console.log('getGameTest', error);
            }
        });
       
    };

<View style={styles.nav}>
    <SelectDropdown
        buttonStyle={styles.dropdownButton}
        defaultButtonText={'---Select---'}
        data={"Games", "Publishers and Developers", "Reviews", "Platform"}
        onSelect={(selectedItem, index) => { 
            console.log(selectedItem, index)
            setSelectedOpt(selectedItem)
        }}
        buttonTextAfterSelection={(selectedItem, index) => {
            return selectedItem
        }}
        rowTextForSelection={(item, index) => {
            return item
        }}

    />

</View>

Answer 1

1: cancel tokens are deprecated from axios , try another approachcheck this

2: use async/await syntax for cleaner code

3: you should pass event object to callback

onSelect={(e)=>{
//mapping and etc ...
}}