React-native - Invariant Violation: Element type is invalid

I have been generating an apk in react-native however when using firebase to retrieve the comments that were integrated into the application, it throws me the following error:

Here is the code:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  TextInput,
  TouchableOpacity
} from 'react-native';

import ArtistBox from './ArtistBox';
import {firebaseDatabase} from './firebase';
import {getArtists} from './api-client';
import Icon from 'react-native-vector-icons/MaterialIcons';
import CommentList from './CommentList';

export default class ArtistDetailView extends Component<{}> {
  state={
    comments:[]
  }

  componentDidMount(){
    this.getArtistCommentsRef().on('child_added', (data) =>{
      const comment = data.val()
      this.setState({
        comments:this.state.comments.concat(comment)
      })
    });
  }

  handleSend = () =>{
    const text = this.state.text
    const artistCommentsRef =  this.getArtistCommentsRef()
    var newCommentRef = artistCommentsRef.push();
    newCommentRef.set({ text });
  }
  getArtistCommentsRef = () =>{
    const id = this.props.artist.id
    return firebaseDatabase.ref('comments/'+ id)
  }


  handleChangeText = (text) => this.setState({text})

  render() {
    const artist = this.props.artist
    const comments = this.state.comments

    return (
      <View style={styles.container}>
        <ArtistBox artist={artist} />
        <CommentList comments={comments}/>
        <View style={styles.inputContainer}>
          <TextInput
             style = {styles.input}
             placeholder= "Type here"
             onChangeText = {this.handleChangeText}
          />
          <TouchableOpacity onPress={this.handleSend}>
            <Icon name="send" size={20} color="lightblue"/>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightgrey',
    paddingTop:5,

  },
  inputContainer:{
    position: 'absolute',
    bottom:0,
    right:0,
    left:0,
    height:50,
    backgroundColor:'white',
    paddingHorizontal:10,
    flexDirection:'row',
    alignItems:'center',
  },
  input:{
    flex:1,
    height:50,
  }

});

NOTE:

Specifically note that adding this part of the code leaves the error:

  componentDidMount(){
    this.getArtistCommentsRef().on('child_added', (data) =>{
      const comment = data.val()
      this.setState({
        comments:this.state.comments.concat(comment)
      })
    });
  }