return child count on firebase reactjs

I'm developing an online quiz where user submits the answers and the data is being pushed to Firebase. After submitting the answer, users can keep track of how many count the specific answers get.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import firebase from './firebase.js';

class App extends Component {
  constructor(){
          super();
          this.state = {
              owl: '',
              house: ''
        };

        //owlChange and houseChange are now exclusively for owl and house values respectively
        this.owlChange = this.owlChange.bind(this);
        this.houseChange = this.houseChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    render(){
        return(
            <div>
            <ol type="1">
            <form onSubmit={this.handleSubmit}>

            <li><p>What is the name of Harry Potter's owl?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="owl" value="hedwig" checked={this.state.owl === "hedwig"} onChange={this.owlChange}/>
                        Hedwig<br></br></li>
                        <li><input type="radio" name="owl" value="ron" checked={this.state.owl === "ron"} onChange={this.owlChange}/>
                        Ron <br></br></li>
                        <li><input type="radio" name="owl" value="brian" checked={this.state.owl === "brian"} onChange={this.owlChange}/>
                        Brian</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <li><p>What is the name of Cho Chang's house?</p></li>
                <ol type="a">
                <div className="radio">
                    <label>
                        <li><input type="radio" name="house" value="gryffindor" checked={this.state.house === "gryffindor"} onChange={this.houseChange}/>
                        Gryffindor<br></br></li>
                        <li><input type="radio" name="house" value="slytherin" checked={this.state.house === "slytherin"} onChange={this.houseChange}/>
                        Slytherin <br></br></li>
                        <li><input type="radio" name="house" value="ravenclaw" checked={this.state.house === "ravenclaw"} onChange={this.houseChange}/>
                        Ravenclaw</li>
                        <br></br>
                        <br></br>
                    </label>
                </div>
                </ol>

            <button>Submit!</button>
            </form>
            </ol>
            </div>
        )
    }

    owlChange = (e) =>{
        this.setState({
            owl: e.target.value
        });
    }

    houseChange = (e) =>{
        this.setState({
            house: e.target.value
        });
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        const itemsRef = firebase.database().ref('answers');
        const item = {
            owl: this.state.owl,
            house: this.state.house
        }
        itemsRef.push(item);
        this.setState({
            owl: '',
            house: ''
        });
    }
}

export default App;

This is my current code. I know there is a function to count the number of child values in database like so Firebase getChildrenCount() returns always '1' but I don't know how to start and where to put it in my react web app. Also, I am very new to web dev using React, so pardon me if my question seems irrelevant

Any help would greatly be appreciated!