**ERROR ** Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

Após a ultima aula, meu aplicativo apresentou esse error. Mesmo usando os códigos do repositorio da Alura, o erro persiste.

*ERROR * Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

Check the render method of TabBarIcon.

This error is located at: in RCTView (created by View) in View (created by TabBarIcon) in RCTView (created by View) in View (created by TabBarIcon) in TabBarIcon (created by BottomTabBarItem) in RCTView (created by View) in View (created by Pressable) in Pressable (created by Pressable) in BottomTabBarItem (created by BottomTabBar) in RCTView (created by View) in View (created by BottomTabBar) in RCTView (created by View) in View (created by AnimatedComponent) in AnimatedComponent in AnimatedComponentWrapper (created by BottomTabBar) in BottomTabBar (created by SafeAreaInsetsContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by BottomTabView) in BottomTabView (created by BottomTabNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by BottomTabNavigator) in BottomTabNavigator (created by AppRotas) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by AppRotas) in AppRotas (created by App) in RCTView (created by View) in View (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in orgsTelas(RootComponent), js engine: hermes

AppRotas.js

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ProdutorRotas from './ProdutorRotas';
import MelhoresProdutoresRotas from './MelhoresProdutoresRotas';

import Coracao from '../assets/coracao.svg';
import Home from '../assets/home.svg';

const Tab = createBottomTabNavigator();

export default function AppRotas(){
    return <NavigationContainer>
    <Tab.Navigator screenOptions={({ route }) => ({ 
      headerShown: false,
      tabBarIcon: ({ color }) => {
        let Icon = Home;

        if (route.name === 'Melhores Produtores') {
          Icon = Coracao;
        }

        return <Icon color={color} />
      },
      tabBarActiveTintColor: '#2A9F85',
      tabBarInactiveTintColor: '#C7C7C7',

      })}>
      <Tab.Screen name='Home' component={ProdutorRotas}/>
      <Tab.Screen name='Melhores Produtores' component={MelhoresProdutoresRotas}/>
    </Tab.Navigator>

  </NavigationContainer>
}

orgsTelas\src\telas\Produtor\index.js

import React from 'react';
import { useRoute } from '@react-navigation/native';
import useTextos from '../../hooks/useTextos';

import { FlatList, Text, View, Image, StyleSheet } from 'react-native';

import Cesta from './componentes/Cesta';
import Topo from '../../componentes/Topo';
//import Topo from '../Produtores/componentes/Topo';

import topo from '../../assets/produtores/topo.png';

export default function Produtor() {
    const route = useRoute();
    const { tituloProdutor, tituloCestas } = useTextos();
    const { nome, imagem, cestas } = route.params;

    const TopoLista = () => {
        return <>
            <Topo titulo={tituloProdutor} imagem={topo} altura={150} />
            <View style={estilos.conteudo}>
                <View style={estilos.logo}>
                    <Image source={imagem} style={estilos.produtorImage} />
                    <Text style={estilos.produtor}>{nome}</Text>
                </View>

                <Text style={estilos.cestas}>{ tituloCestas }</Text>
            </View>
        </>
    }

    return <FlatList
        ListHeaderComponent={TopoLista}
        data={cestas}
        renderItem={({ item }) => <Cesta {...item} produtor={{ nome, imagem }}/>}
        style={estilos.lista}
    />

}

const estilos = StyleSheet.create({
    lista: {
        backgroundColor: '#ffffff',
    },
    conteudo: {
        paddingHorizontal: 16,
    },
    logo: {
        flexDirection: 'row',
    },
    produtorImage: {
        width: 62,
        height: 62,

        marginTop: -23,

        borderRadius: 6,
    },
    produtor: {
        color: '#464646',
        fontSize: 20,
        lineHeight: 32,
        fontWeight: 'bold',
        marginLeft: 16,
    },
    cestas: {
        color: '#464646',
        fontSize: 20,
        lineHeight: 32,
        fontWeight: 'bold',
        marginTop: 32,
    }
});