React-Native-Paper поверхностный компонент не загружается

Question

У меня есть компонент, который загружается в мое приложение, но я не могу загрузить компонент Surface. Текст внутри него отображается нормально, а родительский компонент Surface - нет. Он также не отображается в инспекторе

Мой компонент находится ниже. Есть идеи?

import React, {useState, useContext} from 'react';
import {StyleSheet, View} from 'react-native';
import {Surface, Text} from 'react-native-paper';

function UpComing({navigation}) {
  return (
    <View style={styles.container}>
      <Text style={{fontWeight: 'bold', fontSize: 15}}>Upcoming Classes</Text>
      <Surface styles={styles.surface}>
        <Text>Test</Text>
      </Surface>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 20,
    marginVertical: 10,
  },
  surface: {
    padding: 8,
    height: 80,
    width: 80,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
  },
});

export default UpComing;