React Hooks, useReducer не может получить состояние

Я делаю простой компонент, пытаясь использовать хуки useEffect и useReducer. Кажется, все работает нормально, за исключением того, что ни один из элементов массива не попадает в компонент. Я выполнил несколько операторов console.info внутри различных функций и вижу, что вызов API выполнен успешно и что данные доступны в области действия функции в разделе «События». Однако все это отображается в виде пустого поля. Мой код:

import React, { useReducer, useEffect } from "react";
import "./App.css";

const  App = () => {
  const [events, dispatch] = useReducer(
      (state, action) => { switch (action.type) {
          case "fetchEvents":
              state = [ ...state, action.data];
             return state;

            case "removeEvent":
              return state.filter((_, idx) => idx !== action.idx);

            default:
                console.info(state);
              return state;
        }
      },
  []);

  useEffect(async () => {
    const response = await fetch("https://easynode-veohkvapci.now.sh/api/test");
    const data = await response.json();
    dispatch({type: "fetchEvents", data});
  },[]);

  console.info(events, 'log events');

  return (
      <div>
          {events.map((event, idx) => (
              <div key = {event.event_url} style = {{ border: "solid" }}>
                  <p>{event.name}</p>
                  <p>{event.date}</p>
                  <p>{event.description}</p>
                <button onClick = {() => dispatch({ type: "removeEvent", idx})}>Remove Event</button>
              </div>
          ))}
      </div>
  );
};

export default App;

Может быть, мне вместо этого вызвать useEffect внутри useReducer? Я могу что-то напортачить, что должно произойти в асинхронном режиме.