form input not resetting with useState - reactjs

Question

I have a react bootstrap number form and state.
I would like to reset hours state to 0 after performing the button click and API POST transaction.
hours state updates just fine for the onChange function where I call setHours() in form and I'm using this strategy to reset form data on other components. Any ideas why I can't get it to work elsewhere after button click (i.e. in my try/catch block)??
const [hours, setHours] = useState(0);
// ...
const handleAddWorkItem = async (sprintId, date, hours) => {
try {
await addWorkItemToAirtable(sprintId, date, hours);
const workItems = await fetchWorkItemsByJobId(sprint.job.id);
setworkItems(workItems);
setHours(0); // not working
} catch (error) {
console.log({ error });
}
};
// ...
<Form>
<Form.Group
className="mb-2"
controlId="addTimeFormEmployee"
>
<Form.Label className="mb-0">
<strong>Employee:</strong>
</Form.Label>
<Form.Select
disabled
defaultValue={sprint.employee.id}
onChange={(e) => {
setEmployee(e.target.value);
}}
aria-label="Select Employee"
>
{employees &&
employees.map((employee) => {
return (
<option key={employee.id} value={employee.id}>
{`${employee.firstName} ${employee.surname}`}
</option>
);
})}
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="addTimeFormDate">
<Form.Label className="mb-0">
<strong>Date:</strong>
</Form.Label>
<Form.Control
type="text"
onFocus={(e) => (e.target.type = "date")}
onChange={(e) => {
setDate(e.target.value);
}}
defaultValue={date}
placeholder={date}
/>
</Form.Group>
<Form.Group className="mb-2" controlId="addTimeFormHours">
<Form.Label className="mb-0">
<strong>Hours:</strong>
</Form.Label>
<Form.Control
type="number"
defaultValue={0}
onChange={(e) => setHours(parseInt(e.target.value, 10))}
placeholder={0}
min={0}
/>
</Form.Group>
</Form>
<Button
variant="success"
onClick={() => {
handleAddWorkItem(sprint.id, date, hours);
}}
>
Add Time
</Button>
Thank you!