Навигатор нижней вкладки React Navigation не отображает новые вкладки в Expo Snack

Question

Я начал с минимального примера навигации на основе вкладок, найденного по адресу https://reactnavigation.org/docs/tab-based-navigation, и я пытался добавить дополнительные вкладки. Я продублировал одну из функций, связанных с двумя существующими вкладками в примере, и переименовал ее соответствующим образом, а затем добавил Tab.Screen в Tab.Navigator в функцию экспорта по умолчанию. Новая вкладка появится с именем, которое я дал ей, однако текст внутри функции не отображается, когда я нажимаю на новую вкладку. Он явно меняется, потому что другой текст исчезает, а экран остается пустым, за исключением панели вкладок.

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

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function TestScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Test!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Test" components={TestScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}