rnmapbox 3D buildings

Question

I have implemented @rnmapbox/maps@10.1.31 into my react native expo app. I want the buildings to be 3d though, so I added a FillExtrusionLayer. When I add that my App crashes. Here is the errors:

Log 1:

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MapIntegration.tsx:32.

Log 2:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

Here is my MapComponent:

import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox, { Camera, PointAnnotation, FillExtrusionLayer, VectorSource } from '@rnmapbox/maps';
import { MarkerView } from '@rnmapbox/maps';

Mapbox.setAccessToken(TOKEN);

const App = () => {   
  
    return (
        <View style={styles.page}>
            <View style={styles.container}>
                
                <Mapbox.MapView style={styles.map} styleURL='mapbox://styles/mapbox/dark-v11'>

                    <Mapbox.Camera
                        zoomLevel={15}
                        centerCoordinate={[139.77137734619185, 35.69968125492457]}
                        pitch={60}
                        animationMode={'flyTo'}
                        animationDuration={6000}
                        />
                     
                    <MarkerView
                    id="marker"
                    coordinate={[139.77137734619185, 35.69968125492457]}
                    > 
                    <View style={styles.marker} />
                    </MarkerView>

 
                    <FillExtrusionLayer
                            id="3d-buildings"
                            sourceID="composite"
                            sourceLayerID="building"
                            minZoomLevel={15}
                            maxZoomLevel={22}
                            style={{
                                fillExtrusionColor: '#aaa',
                                fillExtrusionHeight: [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    16,
                                    ['get', 'height'],
                                ],
                                fillExtrusionBase: [
                                    'interpolate',
                                    ['linear'],
                                    ['zoom'],
                                    15,
                                    0,
                                    16,
                                    ['get', 'min_height'],
                                ],
                                fillExtrusionOpacity: 0.6,
                            }}
                        /> 

                </Mapbox.MapView>
            </View>
        </View>
    );
}

export default App;

const styles = StyleSheet.create({
    page: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      container: {
        height: '100%',
        width: '100%',
      },
      map: {
        flex: 1,
      },
      marker: {
        width: 30,
        height: 30,
        backgroundColor: 'red',
        opacity: 0.8,
        borderRadius: 15,
      },
});

When I remove the FillExtrusionLayer everything else works just fine.