I'm trying to render the fetched data on my page but I can only see the data through console.log and keep getting this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

// import StudentContainer from './containers/StudentContainer';

const API = 'https://api.hatchways.io/assessment/students';


  class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            allStudents: []
         }
        }

     componentDidMount() {
         fetch(API)
         .then(resp => resp.json())
         .then(students => {
            console.log(students.students[0].city)
            this.setState({
                allStudents: students.students
            })
      });
     }
     // <StudentContainer allStudents={allStudents} />

     render () {
         console.log("state:",this.state)
         const { allStudents} = this.state
         return (
          <div className="App">
          {console.log("students:", allStudents[0])}
          <h2>Students: {allStudents[0]} </h2>
          </div>
         )
    }
 }
 export default App;

this console.logs an object with key values in it {console.log("students:", allStudents[0])}

but right on the bottom when I try to render it on the page, <h2>Students: {allStudents[0].city} </h2>

it becomes undefined.

Here's a snippet of the data:

{city: 'Fushë-Muhurr', company: 'Yadel', email: 'iorton0@imdb.com', firstName: 'Ingaberg', grades: Array(8), …}
city: "Fushë-Muhurr"
company: "Yadel"
email: "iorton0@imdb.com"
firstName: "Ingaberg"
grades: (8) ['78', '100', '92', '86', '89', '88', '91', '87']
id: "1"
lastName: "Orton"
pic: "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg"
skill: "Oracle"```