Запись Firebase, создающая 2 идентификатора

Я пытаюсь добавить заголовок и тело в свои записи базы данных с помощью firebase, но я получаю идентификатор для тела и заголовка вместо идентификатора для этого билета.

Я уверен, что я неправильно понимаю snap. Что мне нужно изменить, чтобы каждое представление отправляло только один идентификатор для каждого представления?

Ask.js:

import React, { Component } from 'react';
import TicketForm from '../../components/TicketForm.js';
import fire from '../../config/Fire.js';
import { Link, withRouter } from 'react-router-dom'

// CSS
import '../../assets/css/App.css';

class Ask extends Component {
  constructor(props){
    super(props);
    this.addTicket = this.addTicket.bind(this);
    this.database = fire.database().ref().child('tickets');
    // We're going to setup the React state of our component
    this.state = {
      tickets: [],
    }
  }

  componentWillMount(){
    const previousTickets = this.state.tickets;
    // DataSnapshot
    this.database.on('child_added', snap => {
      previousTickets.push({
        id: snap.key,
        ticketTitle: snap.val().ticketTitle,
        ticketBody: snap.val().ticketBody,
      })

      this.setState({
        tickets: previousTickets
      })
    })

  }

  addTicket(title, body){
    this.database.push().set({ ticketTitle: title });
    this.database.push().set({ ticketBody: body });
    alert("Your question has been submitted.")
    this.props.history.push('/pending')
  }

  render() {
    return (
      <div>
        <div className = "m-container">
          <h1>Ask a Question:</h1>
          <hr/>
          <p>
            Type your tech question below to the best of your ability and our network of qualified technicians will look over your question.
            When a technician feels confident enough to give it a shot, you will be matched with technician and will be able to send messages, call, or schedule an in-person visit.
            If the technician cannot arrive at a solution, you will not be charged by that technician and the question will be passed to another qualified technician.
            Once a technician successfully answers your question, you will be prompted with feedback, payment, and an optional tip.
            <br/><br/>
            Keep in mind, your open questions will be under the <Link to = "/pending/">Pending tab</Link>!
            </p>
        </div>
        <div>
          <TicketForm addTicket = {this.addTicket} />
        </div>
      </div>
    );
  }
}

export default withRouter(Ask);

TicketForm.js:

import React, { Component } from 'react';

// CSS
import '../assets/css/App.css';

class TicketForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            ticketBody: '',
        };
        this.handleBodyInput = this.handleBodyInput.bind(this);
        this.handleTitleInput = this.handleTitleInput.bind(this);
        this.writeTicket = this.writeTicket.bind(this);
    }

    // When the user input changes, set the handleTitleInput
    // to the value of what's in the input box.
    handleTitleInput(e){
        this.setState({
            ticketTitle: e.target.value, // Value of the users text input
        })
    }

    handleBodyInput(e){
        this.setState({
            ticketBody: e.target.value, // Value of the users text input
        })
    }



    writeTicket(){
        // Call a method that sets the ticketTitle and ticketBody for a ticket to
        // the value of the input
        this.props.addTicket(this.state.ticketTitle, this.state.ticketBody);
        // Set inputs back to an empty string
        this.setState({
            ticketBody: '',
            ticketTitle: ''
        })
    }



    render(){
        return(
            <div class = "s-container">
                <label for = "title">Title: </label>
                <input
                 id = "title"
                 type = "text"
                 placeholder = "Short title briefly describing issue in a sentence" 
                 value = {this.state.ticketTitle}
                 onChange = {this.handleTitleInput}
                /> 
                <br/>
                <br/>
                <label for = "body">Description: </label>
                <textarea
                 id = "body"
                 placeholder = "Tell us about your problem in your words to the best of your ability. We can iron out the details later if you are not so sure yet." 
                 value = {this.state.ticketBody}
                 onChange = {this.handleBodyInput}
                /> &nbsp;
                <button 
                className = "m-btn"
                onClick = {this.writeTicket}>
                Submit
                </button>
            </div>
        )
    }
}

export default TicketForm;