UseEffect not re-rendering on use state object property change - reactjs

Question

I have a component that fetches data from an API and displays it in a select box. When the select box is changed, it updates a property inside the state. When this is done, I want to run a different useEffect which fetches more values from the API based on the selected item.
// State for dropdown options
const [categories, setCategories] = useState<DropdownItemProps[]>([]);
// State for form
const [category] = useState<CategoryInstance>({
id: "",
number: 1,
sponsor: "",
logo: "",
permit: "",
bumpSpot: 128,
raceEventId: "670d34d5-134b-4408-91bd-691f8c4b62d2",
categoryId: "",
configurationId: "",
category: null,
configuration: null,
raceEvent: null,
ladder: null,
entryList: [],
rounds: [],
});
// UseEffect 1, fetch dropdown items on load
useEffect(() => {
console.log("Use effect 1");
let c: DropdownItemProps[] = [];
categoryStore.loadCategories().then(() => {
categoryStore.categories.forEach((x) =>
c.push({
key: x.id,
value: x.id,
text: x.name,
})
);
setCategories(c);
});
}, [categoryStore]);
// UseEffect 2, fetch more items
useEffect(() => {
console.log("Use effect 2");
console.log(`ID: ${category.categoryId}`);
}, [category.categoryId]);
From my understanding, when the category.categoryId changes value, it should cause the UseEffect to print out the information. But this isn't happening.
<SelectInput
name='categoryId'
placeholder='Category'
label='Category'
options={categories}
search
/>
Select Input
import { useField } from "formik";
import { DropdownItemProps, Form, Label, Select } from "semantic-ui-react";
interface Props {
placeholder: string;
name: string;
type?: string;
label?: string;
options: DropdownItemProps[];
search: boolean;
}
export default function SelectInput(props: Props) {
const [field, meta, helpers] = useField(props.name);
return (
<Form.Field error={meta.touched && !!meta.error}>
<label>{props.label}</label>
<Select
clearable
options={props.options}
value={field.value || null}
onChange={(event, data) => helpers.setValue(data.value)}
onBlur={() => helpers.setTouched(true)}
placeholder={props.placeholder}
search={props.search}
/>
{meta.touched && meta.error ? (
<Label basic color='red'>
{meta.error}
</Label>
) : null}
</Form.Field>
);
}
Any help would great,
Thanks.