Fetch внутри Fetch — объекты недействительны в качестве дочернего элемента React

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

Любые идеи о том, как лучше всего это сделать, будут высоко оценены.

Сообщение об ошибке: Неперехваченная ошибка: объекты недействительны в качестве дочерних элементов React (найдено: [object Promise]). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import { StyleSheet, Image, Text, View } from "react-native";

export default async function App() {
  const [isLoading, setLoading] = useState(true);
  const [isLoadingMp, setLoadingMp] = useState(true);
  const [data, setData] = useState([]);
  const [mpData, setMpData] = useState([]);
  let memberId = 0;

  useEffect(() => {
    fetch(
      `https://members-api.parliament.uk/api/Members/Search?Name=Boris%20Johnson`
    )
      .then((response) => response.json())
      .then((json) => {
        setMpData(json);
        memberId = json.items[0].value.id;
        console.info("memberId:", memberId);
      })
      .catch((error) => console.error(error))
      .then(
        fetch(
          `https://commonsvotes-api.parliament.uk/data/divisions.json/membervoting?memberId=${memberId}`
        )
          .then((response) => response.json())
          .then((json) => setData(json))
          .catch((error) => console.error(error))
          .finally(() => setLoading(false))
          .finally(() => {
            setLoadingMp(false);
          })
      );
  });

  return (
    <View style = {{ flex: 1, padding: 24 }}>
      {isLoading || isLoadingMp ? (
        <Text>Loading...</Text>
      ) : (
        <View style = {styles.container}>
          <Text>
            <Image
              source = {{
                uri: `${mpData.items[0].value.thumbnailUrl}`,
                width: 60,
                height: 60,
              }}
            />
            <Text>{`${mpData.items[0].value.id}\n`}</Text>

            {data.map((individualData) => {
              return `\nDate: ${
                individualData.PublishedDivision.Date
              }\nDivision id: ${
                individualData.PublishedDivision.Date
              }\nDivision title: ${
                individualData.PublishedDivision.Title
              }\nVoted: ${!!individualData.MemberVotedAye ? "Yes" : "No"}\n`;
            })}
          </Text>
          <StatusBar style = "auto" />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});