Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. в ответ

Question

Я продолжаю получать

Ошибка: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

указанный код c - это вызов функции api.getAllUsers () и this.setState, я попытался изменить свои записи экспорта и импорта, используя {} и другие методы, и мой API возвращает данные, которые я проверил с помощью console.log ('TCL: UsersList -> render -> users', users).

Что я могу попробовать дальше?

componentDidMount = async () => {
        this.setState({ isLoading: true})
        
        await api.getAllUsers().then(users => {
            this.setState({
                users: users.data.data,
                isLoading: false,
            })
        })
        .catch( (error) => console.log(error))
    }

указанные строки - это строки 26 и 27 из

import React, {Component} from 'react'
import ReactTable from 'react-table'
import api from '../api'

import styled from 'styled-components'

import 'react-table/react-table.css'

const Wrapper = styled.div`
    padding: 0 40px 40px 40px;
`

class UsersList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            users: [],
            columns: [],
            isLoading: false,
        }
    }

    componentDidMount = async () => {
        this.setState({ isLoading: true})
        
        await api.getAllUsers().then(users => {
            this.setState({
                users: users.data.data,
                isLoading: false,
            })
        })
        .catch( (error) => console.log(error))
    }

    render(){
        const { users, isLoading} = this.state
        console.log('TCL: UsersList -> render -> users', users)

        const columns = [
            {
                Header: 'ID',
                accessor: '_id',
                filterable: true,
            },
            {
                Header: 'Name',
                accessor: 'name',
                filterable: true,
            },
            {
                Header: 'Mac',
                accessor: 'mac',
                filterable: true,
            },
            {
                Header: 'Alert',
                accessor: 'alert',
                filterable: true,
            },
            {
                Header: 'Time',
                accessor: 'time',
                Cell: props => <span>{props.value.join(' / ')}</span>,
            },

        ]
        let showTable = true
        if(!users.length) {
            showTable = false
        }

        return(
            <Wrapper>
                {showTable && (
                    <ReactTable
                        data ={users}
                        columns={columns}
                        loading={isLoading}
                        defaultPageSize={10}
                        showPageSizeOptions={true}
                        minRows={0}
                    />
                )}
            </Wrapper>
        )
    }
}

export default UsersList

код API, из которого я экспортирую, это

import axios from 'axios'

const userapi = axios.create({
    baseURL: 'http://localhost:80/api',
})

const gatewayapi = axios.create({
    baseURL: 'http://localhost:3000/api',
})

export const insertUser = payload => userapi.post(`/user`, payload)
export const getAllUsers = () => userapi.get(`/users`)
export const updateUserById = (id, payload) => userapi.put(`/user/${id}`, payload)
export const deleteUserById = id => userapi.delete(`/user/${id}`)
export const getUserByID = id => userapi.get(`/user/${id}`)
export const getUserByMac = mac => userapi.get(`user/mac/${mac}`)

export const insertEntry = payload => gatewayapi.post(`/gateway`, payload)
export const getAllEntry = () => gatewayapi.get(`/gateways`)
export const updateEntryById = (id, payload) => gatewayapi.put(`/gateway/${id}`, payload)
export const deleteEntryById = id => gatewayapi.delete(`/gateway/${id}`)
export const getEntryByID = id => gatewayapi.get(`/gateway/${id}`)
export const getEntriesByMac = mac => gatewayapi.get(`gateways/mac/${mac}`)
export const getEntriesByUID = uid => gatewayapi.get(`/gateways/uid/${uid}`)
export const getEntriesByTimeAndMac = (gatewaymac, time1, time2) => gatewayapi.get(`gateways/time/${gatewaymac}/${time1}/${time2}`)

const apis = {
   insertEntry,
   getAllEntry,
   updateEntryById,
   deleteEntryById,
   getEntriesByMac,
   getEntryByID,
   getEntriesByUID,
   getEntriesByTimeAndMac,
   insertUser,
   getAllUsers,
   updateUserById,
   deleteUserById,
   getUserByID,
   getUserByMac,
}

export default apis