React: State is set after api call, not before

Question

I have grid component where I have filter to filter by Id column. When I write something into it, this code will trigger.

filterChange(event) {
    debugger;
    const test = event.filter.filters[0];
    const column = test.field;
    const value = test.value;

    this.setState(prevState => ({
        ...prevState,
        filter: {
            ...prevState.filter,
            query: {
                ...prevState.filter.query, 
                filter: {
                    ...prevState.filter.query.filter,
                    JobId: value
                }
            }
        }
    }))
    console.log("before");
    console.log(this.state.filter.query);
    // api call to get new data
    this.props.getAllProcesses(this.state.filter);
}

My state object looks like this below

    this.state = {
        filter:{
            pageable: this.state ? this.state.pageable : {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: true,
                previousNext: true
            },
            pagingOptions:{
                pageSize: 5,
                skip: 0
            },
            query:{
                collectionName: "",
                filter: {},
                sort: {},
                projection: {},
                take: 0,
                skip: 0,
                includeTotalCount: true,
                context: null,
            }           
        }
    };

When state is changed, filter in query object still has old data and this.props.getAllProcesses(this.state.filter) gets wrong data from api, since query filter is still empty

When I checked query filter in componentDidUpdate lifecycle, state was set correctly.

componentDidUpdate(prevProps, prevState) {
    console.log("after");
    console.log(this.state.filter.query);
}

So my question is, how or when I have to call my api after my state is correctly set?