How to use map function to Mobx observable state? - reactjs

Question

Now I would like to use Map function to show a component with each array.
But, my code with map is not working rightly.
In firestore, there are 3 document in "food" collection but this map function can only render one document.
This is my code below in render component.
renderItemBox() {
const { store } = this.props;
const items = store.restaurantStore.Items;
return items.map((value, index) => {
console.log(items);
return (
<TouchableOpacity key={index}>
<View style={styles.itemsBox}>
<View style={styles.itemsImageBox}>
<Image
source={require('../../assets/Images/Home/HomeListImageShop.jpg')}
style={styles.itemsImage}
/>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.itemsName}>
{value[index].name}
</Text>
<Text style={styles.itemsTag}>
{value[index].tag}
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.itemsDescription}>
{value[index].shortDescription}
</Text>
<TouchableOpacity
style={styles.likeButtonBox}
onPress={this.handleLikeButton.bind(this)}
>
{this.handleLikeImage()}
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
);
});
}
In addition to this, I set store component in my project.
This code above is importing observable state(array) from that store.
Below one is that store.
import { observable, action } from 'mobx';
import firebase from 'firebase';
class RestaurantStore {
#observable Items = [];
#action handleFirestoreCollectionOfFoods () {
const db = firebase.firestore();
db.collection('foods')
.get()
.then((snapshot) => {
const preItems = [];
snapshot.forEach((doc) => {
const docData = doc.data();
preItems.push(docData);
});
this.Items.push(preItems);
})
.catch((error) => {
console.log(error);
});
}
}
export default RestaurantStore;
Fortunetely, this store can import complete document from firestore.
I did check that with console.log.
So, does someone know how to use map function to mobx state completely?