Отображать данные в зависимости от ответа от функционального компонента, который выбирает даты входа

Question

Цель

Я хочу передать выборку, которая публикует даты входа в систему, получает токен или сообщение об ошибке, и отображает содержимое в зависимости от ответа выборки.

Описание

В зависимости от ответа я отображаю содержимое. Например: если пароль неправильный, я получаю статус ответа 400 с соответствующим сообщением. В зависимости от ответа я устанавливаю состояния и отображаю сообщения или нет.

export default function LoginModal({ children }) {
  const [user, setUser] = React.useState({
    email: "",
    password: ""
  });

  const [displayMessage, setDisplayMessage] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState();

  async function login(email, password) {
    const response = await fetch("/api/auth", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ email, password })
    });

    const data = await response.json();

    if (response.status !== 200) {
      setErrorMessage(data);
      setDisplayMessage(true);
    } else {
      setDisplayMessage(false);
      localStorage.setItem("token:", data.token);
    }
  }

  function handleChange(event) {
    const value = event.target.value;
    setUser({
      ...user,
      [event.target.name]: value
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    login(user.email, user.password);
  }

  return (
    <ModalBackground>
      <ModalContent>
        {displayMessage && <AlertText>{errorMessage}</AlertText>}
        <Form onSubmit={handleSubmit}>
          <Label>Email:</Label>
          <BasicInput name="email" value={user.email} onChange={handleChange}></BasicInput>
          <Label>Passwort:</Label>
          <BasicInput
            name="password"
            type="password"
            value={user.password}
            onChange={handleChange}
          ></BasicInput>
          <CenterButton>
            <Button>Einloggen</Button>
          </CenterButton>
        </Form>
        {children}
      </ModalContent>
    </ModalBackground>
  );
}

LoginModal.propTypes = {
  children: PropTypes.object
};

Когда я выполняю функцию на стороне, у меня появляется функциональный компонент для проверки входа в систему, который выглядит следующим образом:

export async function login(email, password) {
  const response = await fetch("/api/auth", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ email, password })
  });

  return response.json();
}

LoginModal выглядит теперь так. Я импортирую функцию входа в систему сейчас и вызываю ее в функции handleSubmit.

export default function LoginModal({ children }) {
  const [user, setUser] = React.useState({
    email: "",
    password: ""
  });

  const [displayMessage, setDisplayMessage] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState();


  function handleChange(event) {
    const value = event.target.value;
    setUser({
      ...user,
      [event.target.name]: value
    });
  }

  async function handleSubmit(event) {
    event.preventDefault();
    const response = await login(user.email, user.password);
    console.log(response);
    if (response.status !== 200) {
      setErrorMessage(response);
      setDisplayMessage(true);
    } else {
      setDisplayMessage(false);
      localStorage.setItem("token:", response.token);
    }
  }

  return (
    <ModalBackground>
      <ModalContent>
        {displayMessage && <AlertText>{errorMessage}</AlertText>}
        <Form onSubmit={handleSubmit}>
          <Label>Email:</Label>
          <BasicInput name="email" value={user.email} onChange={handleChange}></BasicInput>
          <Label>Passwort:</Label>
          <BasicInput
            name="password"
            type="password"
            value={user.password}
            onChange={handleChange}
          ></BasicInput>
          <CenterButton>
            <Button>Einloggen</Button>
          </CenterButton>
        </Form>
        {children}
      </ModalContent>
    </ModalBackground>
  );
}

LoginModal.propTypes = {
  children: PropTypes.object
};

Проблема

Пока это работает (сообщения об ошибках отображаются). Ожидайте, что проверка прошла успешно. Затем происходит сбой и выдается следующее сообщение об ошибке:

Ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {токен}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

введите описание изображения здесь

Когда я комментирую setDisplayMessage(true), оно не вылетает и я получаю токен, но он не сохраняется в локальном хранилище.

Вопрос

Что я делаю не так? Есть ли утешение или нет возможности передать выборку извне, если я хочу обработать ее ответ (в случае «ошибки»)?

Заранее спасибо за ваше время:)