Options not displaying in react-select dropdown, but can see the array looks good in console.log - react-select

Question

I have an async api call (using axios) to fetch all my 'options' from the server. I can see the response coming in even modified the API to return the options with the "label" and "value" in the array.
I have tried using the component which also did not work. I am not even trying to set the value yet, just want the list of options to display.
Have stripped the component to its bare minimum
Here is my complete component:
import Api from "../API/Api";
import Select from "react-select/async";
// so I have access to the AccessToken for any requests I need to send..
// Might want to 'catch' a 401 error and retry the submission, but lets first
// see if the form works properly
import { useCookies } from "react-cookie";
const GetSuppliers = () => {
const [cookies] = useCookies("accessToken");
const [input, setInput] = useState("");
const [suppliers, setSuppliers] = useState([]);
const askApi = async searchInput => {
await Api.get("supplier", {
headers: {
Authorization: "Bearer ".concat(cookies.accessToken)
},
params: {
searchString: ""
}
}).then(response => {
setSuppliers(response.data);
return response.data;
});
};
useEffect(() => {
askApi();
}, []);
if (suppliers.length == 0) {
return <div>Loading ... </div>;
} else {
console.log(suppliers);
return (
<div className="DropdownField">
<Select cacheOptions options={suppliers} defaultOptions />
</div>
);
}
};
export default GetSuppliers;
The console.log(suppliers); returns :
1: {value: 5609, label: "AAE02-01-AP", name: "Supplier name 2"}
2: {value: 6197, label: "AAG01-01-AP", name: "Supplier name 3"}
3: {value: 6402, label: "AAL01-01-AP", name: "Supplier name 4"}
4: {value: 6486, label: "AAN01-02-AP", name: "Supplier name 5"}
So I am expecting it to work. Where am I missing the plot?

Answer 1

This was a rookie mistake (at least I am a rookie, so nobody can blame me).
During my original struggles I attempted the Async select, so the import was still reference the "Async" select.
Changed
import Select from "react-select/async";
to:
import Select from "react-select";
And voila, options showing!