How to properly use state hook with useSelector? - reactjs

Question

I have two react-select elements in my app and the 2nd one should be populated with options based on the selection of the first. It works but when the Select #1 is cleared, #2 is not being reset.
So I decided to implement useState to help me update/reset the options for Select #2 but it's acting wonky. Am I missing something or is there a better way to accomplish this?
export const dataViewPage = ({
getData,
loadLocationsByType,
classes,
}) => {
const [stateValue, setStateValue] = useState('');
const [store, setStore] = useState('');
const [storeOptions, setStoreOptions] = useState([]); // Constant to populate options for Select #2
const locationType = 'store';
const Input = styled('input')({ display: 'none' });
/* Returns locations in selected state in array of objects with location_id and name */
const locations = useSelector((state) =>
getFilteredLocations(state, stateValue, locationType)
);
useEffect(() => { // Fetches locations data on state change
stateValue &&
loadLocationsByType({ locationType: locationType, state: stateValue });
}, [stateValue, loadLocationsByType]);
useEffect(() => { // Sets store options in expected format
if (locations) {
setStoreOptions(
convertObjArrayToSelectOptions(locations, 'location_id', 'name')
);
} else { // Reset if no state is selected?
setStoreOptions([]);
}
}, [locations, stateValue]);
}
/* Main input functions */
const handleStateChange = (e) => {
let stateEntered = e ? e.value : '';
setStateValue(stateEntered);
};
const handleStoreChange = (e) => {
let selectedStore = e ? e.value : '';
setStore(`T${selectedStore}`);
console.log(selectedStore);
};
return (
<div>
<div>
<p>Enter or select state</p>
<Select
classes={classes}
placeholder="Select state"
options={states}
onChange={handleStateChange}
isClearable
/>
</div>
<div>
<p>Select store:</p>
<Select
options={storeOptions}
isClearable
onChange={handleStoreChange}
/>
</div>
<label>
<Input type="submit" />
<Button
onClick={handleSubmit}
>
View data
</Button>
</label>
</div>
);
};