React list only shows 1 item from loop

Please advice me as my react native page does not loop through all the returned items from the api.

I have checked all i can check but unfortunately, i am unable to find out where the error comes form

I have tested the api with data all seems to be working wellI have also added the styles and json response

json response is

"data":["aaaaaaaaaaaaaaaaaa","{\"amount\": \"2000\", \"dataSource\": null, \"showDatePicker\": false, \"thedatetime\": 2020-07-18T10:49:41.479Z, \"title\": \"Gas\"}"]}aaaaaaaaaaaaaaaaaa Object {"amount": "2000","dataSource": null,"showDatePicker": false,"thedatetime": 2020-07-18T10:49:41.479Z,"title": "Gas",}Unrecognized event: {"type":"client_log","level":"log","data":["aaaaaaaaaaaaaaaaaa","{\"amount\": \"10000\", \"dataSource\": null, \"showDatePicker\": false, \"thedatetime\": 2020-07-18T10:49:41.479Z, \"title\": \"Food\"}"]}aaaaaaaaaaaaaaaaaa Object {"amount": "10000","dataSource": null,"showDatePicker": false,"thedatetime": 2020-07-18T10:49:41.479Z,"title": "Food",}

See my code below

import React, { Component } from "react";import {  FlatList,  Text,  View,  StyleSheet,  ActivityIndicator} from "react-native";import Constants from "expo-constants";function Item({ title }) {  return (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>  );}class ExpenseList extends Component {  constructor(props) {    super(props);    this.state = {      isLoading: true,      dataSource: null    };  }  componentDidMount() {    return fetch("https://myurl.com/expense/api/get_all.php")      .then(response => response.json())      .then(responseJson => {        this.setState({          isLoading: false,          dataSource: responseJson.users        });      })      .catch(error => console.log(error));  }  render() {    if (this.state.isLoading) {      return (<View style={styles.container}><ActivityIndicator /></View>      );    } else {      let myExpenses = this.state.dataSource.map((val, key) => {        return (<View key={key} style={styles.item}><Text>{val.title}</Text><Text>{val.title}</Text></View>        );      });      return <View style={styles.container}>{myExpenses}</View>;    }  }}    const styles = StyleSheet.create({  container: {    flex: 1,    marginTop: Constants.statusBarHeight  },  item: {    backgroundColor: "#f9c2ff",    padding: 10,    marginVertical: 4,    marginHorizontal: 8  },  title: {    fontSize: 16  }});export default ExpenseList;