useState в React Hooks не обновляет массив

Я пробовал много вещей и, кажется, не могу понять, почему setTypes не обновляет массив типов?

import { useState, useEffect } from 'react';
import { PostList } from './post-list';
import * as api from '../utils/api';

export const PostSelector = (props) => {
  const [posts, setPosts]     = useState([]);
  const [loading, setLoading] = useState(false);
  const [type, setType]       = useState('post');
  const [types, setTypes]     = useState([]);
  
  const fetchTypes = async () => {
    setLoading(true);
    const response = await api.getPostTypes();
    delete response.data.attachment;
    delete response.data.wp_block;
    const postTypes = response.data;
    console.log(response.data); // {post: {…}, page: {…}, case: {…}}
    setTypes(postTypes);
    console.log(types); // []

    // Why types remain empty??
  }

const loadPosts = async (args = {}) => {
  const defaultArgs = { per_page: 10, type };
  const requestArgs = { ...defaultArgs, ...args };
  

  requestArgs.restBase = types[requestArgs.type].rest_base; // Cannot read property 'rest_base' of undefined
  
  const response = await api.getPosts(requestArgs);
  console.log(response.data);
}

useEffect(() => {
  fetchTypes();
  loadPosts();
}, []);

  return (
    <div className="filter">
      <label htmlFor="options">Post Type: </label>
      <select name="options" id="options">
        { types.length < 1 ? (<option value="">loading</option>) : Object.keys(types).map((key, index) => <option key={ index } value={ key }>{ types[key].name }</option> ) }
      </select>
    </div>
  );
}

Пожалуйста, взгляните на console.log и обратите внимание на разные ответы.

Я пытаюсь загрузить список типов, в данном случае «сообщение», «страница» и «дело», а затем отобразить список сообщений на основе текущего «типа». Тип по умолчанию - «сообщение».

Если я добавлю [типы] в useEffect. Я наконец получил значения, но компонент отрисовывает без остановок.

Спасибо всем за комментарии. Многие люди указали на проблему, заключающуюся в том, что тот факт, что мы устанавливаем состояние, не означает, что оно будет установлено сразу, потому что оно асинхронное.

Как же тогда решить эту проблему? Независимо от причин, как нам это сделать? Как мы работаем с нашим состоянием в любой момент времени и выполняем вычисления на основе нашего состояния, если мы не знаем, когда оно станет доступным? Как убедиться, что мы ждем того, что нам нужно, а затем используем ожидаемые значения?