How to get Collection name from firebase to React Native Android?

Question

I'm trying to get all the collection names from my firebase that look like '18-05-2023', '21-05-2023', etc into my React Native View.

But with my code fetchCollectionName() it's showing itemName and itemPrice instead.

if I try collectionData[0] it give me an error.

My expectation is that in the terminal it can displays like this:
18-05-2023

21-05-2023

The collection name is what I want to retrieve. How can I do this?

This is my full code:

import React, {useState, useEffect} from 'react';
import { Text, View, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
import styles from './styles';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { useNavigation } from '@react-navigation/native';
import {firebase} from '../config';

function Firstpage() {
    const navigation = useNavigation();
    const [amount, setAmount] = useState(1500000);
    const [isEditing, setIsEditing] = useState(false);
    const [inputAmount, setInputAmount] = useState('');
    const [collectionName, setCollectionName] = useState('');

    //this one is the code
    useEffect(() => {
        const fetchCollectionName = async() => {
            try{
                const collectionSnapshot = await firebase.firestore().collection('18-05-2023').get();
                const collectionData = collectionSnapshot.docs.map((doc) => doc.data());
                if (collectionData.length > 0){
                    setCollectionName(collectionData);
                }
                console.log(collectionData);
            }catch (error){
                console.log('Error fetching collection name: ', error);
            }
        }
        
        fetchCollectionName();
    }, [])

    const handleEditAmount = () => {
        setIsEditing(true);
    };
  
    const handleAmountChange = (value) => {
        setInputAmount(value);
    };
  
    const handleAmountSubmit = () => {
        const newAmount = parseInt(inputAmount, 10) + amount;
        setAmount(newAmount);
        setInputAmount('');
        setIsEditing(false);
    };
          
    return(
        <View style={{ marginBottom: 80, backgroundColor: 'white', height: '100%' }}>
            <View style={styles.newBox}>
                <View style={styles.containerTotalMoney}>
                    <TouchableOpacity style={styles.amountMoney} onPress={handleEditAmount}>
                        <FontAwesome name='plus-circle' size={55} color='#546e27' style={{ }} />
                        {isEditing ? (
                        <TextInput
                            style={{ fontWeight: 'bold', marginLeft: 10 }}
                            value={inputAmount}
                            onChangeText={handleAmountChange}
                            keyboardType='numeric'
                            autoFocus={true}
                            placeholder='Input Nominal'
                            onSubmitEditing={handleAmountSubmit}
                        />
                        ) : (
                        <Text style={{ fontWeight: 'bold', marginLeft: 10, fontSize: 30 }}>Rp{amount.toLocaleString()}</Text>
                        )}
                    </TouchableOpacity>
                </View>

                <TouchableOpacity onPress={() => navigation.navigate('Addnew')}>
                    <Text style={styles.newButton}>New</Text>
                </TouchableOpacity>
            </View>

            <ScrollView style={styles.listExpense}>
                {/* I give each collection a name like dd-mm-yyyy. I want the view below to retrieve the collection name from firebase.*/}
                <View style={styles.container}>
                    <TouchableOpacity onPress={() => navigation.navigate('Detaillist')} style={{ alignItems: 'center' }}>
                        <Text style={styles.TitleDate}>{collectionName}</Text>

                        <View style={{ flexDirection: 'row' }}>
                            <Text style={{ fontSize: 15, fontWeight: 'bold', marginRight: 10 }}>Sun</Text>

                            <Text style={{ fontStyle: 'italic' }}>Rp10.000.000</Text>
                        </View>
                    </TouchableOpacity>

                    <View style={styles.ActionDate}>
                        <TouchableOpacity onPress={() => navigation.navigate('Detaillist')}>
                            <FontAwesome name='pencil' style={styles.ActionText} />
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() =>
                            Alert.alert(
                                'Delete Confirmation',
                                'Are you sure want to delete this?',
                                [
                                    {
                                        text: 'Cancel',
                                        style: 'cancel'
                                    },
                                    {
                                        text: 'Delete',
                                        onPress: () => console.log('Item dihapus')
                                    }
                                ]
                            )}>
                            <FontAwesome name='trash' style={styles.ActionText} />
                        </TouchableOpacity>
                    </View>
                </View>

                <View style={{ margin: 10 }}></View>
            </ScrollView>
        </View>
    )
}

export default Firstpage;