firebaseから取得したデータをjsxで表示できない

Question

非同期処理firebaseからの取得の前にrenderされてしまい、コンポーネントに上手く値を渡す事が出来ておりません。firebaseから値を取得するまではLoadingを表示し、取得が完了すると同時に画面を切り替える様にしたいのですが、下記のコードでは何が足りないかをご教示頂けないでしょうか

firebaseのデータ

    database.ref("N3").push(
        {
        description: "結論を述べる",
        example: "彼は真面目なので、よく勉強する",
        memo: "理由をしめしたい",
        title: "〜なので",
        voice: ""
        }
  　);

---

javascript

import React from 'react';
import * as firebase from 'firebase';

class Grammer extends React.Component {
state =
{
N1:[],
N2:[],
N3:[]
};
UNSAFE_componentWillMount(){
firebase.database().ref("N3")
.on(("value"),async (snapshot)=>{
snapshot.forEach((childSnapshot)=>{
this.setState(()=>{
N3: this.state.N3.push({
id: childSnapshot.key,
...childSnapshot.val()
})
});
});
console.log(this.state.N3)
});
}

render(){
    if(!this.state.N3[0]){
        return <div>Loading</div>;
    }

    return(
        <div>
            {this.state.N3[0].title}
        </div>
    )
};

};

export default Grammer;