arrays - Initiate React components with data from Firebase database?

Question

I'm new to web development. In my site I have a message board when people can write to my Firebase Realtime Database (under '/message/'). The writing works fine, and I want to iterate all of the messages as an array of components "Message" that would be displayed inside the "CmsMessages" component, like this:

function CmsMessages () {
    return (
        <div>
            {[...Array(5)].map((_, i) => <Message key={i} />)} // say I have 5 messages
        </div>
    )
}
function Message () {
    return (
        <div>
            message title
        </div>
    )
}

This is how data is called from Firebase:

firebase.database().ref("message").on("value", function(snapshot) {
 let title = childSnapshot.val().title
})

But I could not figured out how to make this data to be returned from a functional component "Message, for each of my messages.

Does anybody have an idea? Thanks!!!

Edit: my wanted result is a separate component for any entry under "message", to be placed inside CmsMessages, like this:

CmsMessages
|
- Message (return: <div>{title of message #1}<div>)
|
- Message (return: <div>{title of message #2}<div>)
|
- Message (return: <div>{title of message #3}<div>)
|
- Message (return: <div>{title of message #4}<div>)
|
- Message (return: <div>{title of message #5}<div>)

Answer 1

Waitting for answers