尝试导入组件时元素类型无效错误

Question

当尝试彼此使用不同的组件时，我收到了这个无效的元素错误。我已经检查了所有内容，但我仍然无法弄清楚是什么原因引起了这种问题。我试图更改我的webpack.config文件中的代码，但似乎没有任何区别。是什么原因导致错误。

我的回溯和错误在这里：

我的代码似乎在这里引起错误：

import React from 'react';
import axios from '../axios';
import { Avatar } from 'antd';

class RegisteredUsers extends React.Component {
    state = {
        regs: []
    }

    componentDidUpdate(prevProps) {
        if (prevProps !== this.props) {
            const trainingID = this.props.trainingID
            axios.get(`/api/eventregistrations/${trainingID}`)
                .then(res => {
                    this.setState({
                        regs: res.data
                    })
                })
        }
    }

    render() {
        return(<UserIcons regs1={this.state.regs} />)
    }
}

class UserIcons extends React.Component {

    state = {
        usersgroup: []
    }

    componentDidUpdate(prevProps) {
        if(prevProps !== this.props){
            const registrations = this.props.regs1
            this.setState({
                usersgroup: registrations.map((registration) => <UserIcon profileID={registration.profile} />)
            }, () => console.log(this.state.usersgroup))
        }

    }

    render() {
        return(<Avatar.Group><ul>{this.state.usersgroup}</ul></Avatar.Group>)
    }
}

class UserIcon extends React.Component {

    state = {
        profile: {}
    }

    componentDidUpdate(prevProps) {
        if(prevProps !== this.props){
            const profileID = this.props.profileID
            axios.get(`/api/profile/${profileID}`)
                .then((res) => {
                    this.setState({
                        profile: res.data
                    })
                })
        }
    }

    render(){
        return(<Avatar src={this.state.profile.image} />)
    }
}

export default RegisteredUsers;