React Calling function from other function, doesn't get the latest state value

Question

I have a reducer to manipulate the Tableprops such as pagination, order, and filter. The TableProps will always updated everytime the is a change inside the table and its work fine. But when I call the delete function and then I call fetch function. The value of my TableProps always return initialProps. I also use createcontext to pass there state and function to the children.

Nb: all of the code bellow wrapped inside a function with children param.

const [TableProps, dispatch] =  useReducer(TableReducer, initialProps);

const doDelete = async (id: number) => {
setLoading(true);
const response: Responsetype = await _delete<Responsetype>(TableProps.fetch + '/' + id, {});
if (response.code) {
  alert(response);
  await fetch();
}
setLoading(false);}

const fetch = () => {console.log(TableProps)  // always return initialProps
}
const context = React.CreateContext();
const value = {doDelete, TableProps .....}
return (<context.provider value={value}>{children}<context.provider>);