View config getter callback for component `th` must be a function (received `undefined`). Make sure to start component names with a capital letter

Error is: Render error: View config getter callback for component th must be a function (received undefined). Make sure to start component names with a capital letter.

My code:

import {Text, View, Image, Platform, ScrollView, StyleSheet, ActivityIndicator, FlatList,} from "react-native";
import React, { useEffect, useState } from 'react';


import MaUTable from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import { useTable } from 'react-table'

function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })

    // Render the UI for your table
    return (
        <MaUTable {...getTableProps()}>
            <TableHead>
                {headerGroups.map(headerGroup => (
                    <TableRow {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <TableCell {...column.getHeaderProps()}>
                                <Text>{column.render('Header')}</Text>
                            </TableCell>
                        ))}
                    </TableRow>
                ))}
            </TableHead>
            <TableBody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <TableRow {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return (
                                    <TableCell {...cell.getCellProps()}>
                                        <Text>{cell.render('Cell')}</Text>
                                    </TableCell>
                                )
                            })}
                        </TableRow>
                    )
                })}
            </TableBody>
        </MaUTable>
    )
}

export function CartScreen  ({route,navigation}) {


    let data;
    if(route.params === undefined){
        data = undefined;
    }else{
        data = route.params.json;
    }


    data = JSON.parse(data);
    console.warn('HEEYYYYYYYYYYYYY' + data);
    const columns = React.useMemo(
        () => [
            {
                Header: 'Produto',
                columns: [
                    {
                        Header: 'Nome do produto',
                        accessor: 'enc.produtoNome',
                    },
                    {
                        Header: 'Preço',
                        accessor: 'enc.produtoPreco',
                    },
                ],
            },
        ],
        []
    )

    return (
        <div>
            <Table columns={columns} data={data.encomenda} />
        </div>
    );
}


const styles = StyleSheet.create({
    // Simple style code here
});

If anyone could help me it would be awesome.