react.js useState doesn't update the - reactjs

Question

I have a series of 4 dropdowns with filtering of the available items of the 2nd based on the selection of the 1st, and so on down to the 4th. The 1st, 2nd and 3rd work as expected, but the 4th never has any items in it. All of the typeahead dropdowns use the same component, so there is no difference in the code used between them.
Here is the component that is giving me grief, the relevant typeahead is the last that uses availableSpots for its items.
import React, { useState, useEffect } from "react";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "react-bootstrap";
import { UseFetchCountries, UseFetchStates, UseFetchWaters, UseFetchSpots } from "./hooks/SearchBarHooks";
import TypeAheadDropDown from "./Typeaheads/TypeAheadDropDown";
const SearchBar = () => {
const dbCountries = UseFetchCountries("http://localhost:3033/country");
const dbStates = UseFetchStates("http://localhost:3033/state");
const dbWaters = UseFetchWaters("http://localhost:3033/water");
const dbSpots = UseFetchSpots("http://localhost:3033/spot");
const [availableStates, setAvailableStates] = useState(dbStates);
const [availableWaters, setAvailableWaters] = useState(dbWaters);
const [availableSpots, setAvailableSpots] = useState(dbSpots);
const [selectedCountry, setSelectedCountry] = useState({});
const [selectedState, setSelectedState] = useState({});
const [selectedWater, setSelectedWater] = useState({});
const [selectedSpot, setSelectedSpot] = useState({});
const selectCountryHandler = (country) => {
setSelectedCountry(country);
setAvailableStates(dbStates.filter((state) => state.country_id == country.id));
console.log("===> selectCountryHandler > availableSpots: " + JSON.stringify(availableSpots));
};
const selectStateHandler = (state) => {
setSelectedState(state);
setAvailableWaters(dbWaters.filter((water) => state.id == water.state_id));
console.log("===> selectStateHandler > availableSpots: " + JSON.stringify(availableSpots));
};
const selectWaterHandler = (water) => {
setSelectedWater(water);
console.log("===> water: " + JSON.stringify(water));
console.log("===> dbSpots: " + JSON.stringify(dbSpots));
setAvailableSpots(dbSpots.filter((spot) => spot.water_id == water.id));
console.log("===> Filtered Spots: " + JSON.stringify(dbSpots.filter((spot) => spot.water_id == water.id)));
console.log("===> selectStateHandler > availableSpots: " + JSON.stringify(availableSpots));
};
const selectSpotHandler = (spot) => {
setSelectedSpot(spot);
};
const isButtonEnabled = () => {
if (selectedCountry.id && selectedState.id && selectedWater.id && selectedSpot.id) {
return "{{false}}";
}
return "{{disabled}}";
};
useEffect(() => {
setAvailableSpots(dbSpots.filter((spot) => spot.water_id == selectedWater.id));
}, [dbSpots, selectedWater]);
return (
<div className="container-fluid h-100">
<div className="row bordered-component">
<h4>Select your filters</h4>
<Table className="table search-bar-filter">
<tbody>
<tr>
<td className="dd-label-cell">
<h6>Country: </h6>
</td>
<td>
<TypeAheadDropDown items={dbCountries} countrySelected={selectCountryHandler} />
</td>
</tr>
<tr>
<td className="dd-label-cell">
<h6>State/Region: </h6>
</td>
<td>
<TypeAheadDropDown items={availableStates} parent={selectedCountry} stateSelected={selectStateHandler} />
</td>
</tr>
<tr>
<td className="dd-label-cell">
<h6>Water: </h6>
</td>
<td>
<TypeAheadDropDown items={availableWaters} parent={selectedState} waterSelected={selectWaterHandler} />
</td>
</tr>
<tr>
<td className="dd-label-cell">
<h6>Spot: </h6>
</td>
<td>
<TypeAheadDropDown items={availableSpots} parent={selectedWater} spotSelected={selectSpotHandler} />
</td>
</tr>
<tr>
<td> </td>
<td>
<Button className="float-right" variant="success" disabled={isButtonEnabled()}>
Get Fishing Reports
</Button>
</td>
</tr>
</tbody>
</Table>
</div>
</div>
);
};
export default SearchBar;
The console logs show that the data is retrieved from the REST endpoint in the useFetch* functions and dbSpots is properly set. But availableSpots is never set.