How to write and read real-time data from Firebase with React js

I am kind of new in React. I have been able to read real-time data in json format from Firebase in a Web App, but, when I try to write info from the UI to the database I just get code type objects and not the written data. Worst than that, I am messing something else in the code because every time user writes a character, the app updates the value and sends the info to the database. I would deeply appreciate any indication for the right path and thanks in advance.

This is the main page code where the problem occurs:

import React, { Component } from "react";
import {
  IonPage,
  IonContent,
  IonHeader,
  IonToolbar,
  IonButton,
  IonInput,

} from "@ionic/react";
import TabContainer from "../components/TabContainer";
import firebase from '@firebase/app'

const writeUserData =(userInfo)=> {
  firebase.database().ref('reservas').push({
      userInfo
  }).catch((error)=>{
      //error callback
      console.log('error ' , error)
  })
}

class HomePage extends Component {

  constructor() {
    super();
    this.state = {
      onListPage: true,
      username:[],
      reservas:[]

    };
  }

  componentWillUpdate () {

      const readUsersData = ()=> {
      const nameRef =  firebase.database().ref('reservas')
      nameRef.on('value', (snapshot)=> {
        const state = snapshot.val()
        this.state.reservas =  state
    })

    }
    readUsersData()
    }

  _changedTabs = e => {
    if (e.currentTarget.attributes.tab.value === "tab1") {
      this.setState(() => ({ onListPage: true }));
    } else {
      this.setState(() => ({ onListPage: false }));
    }
  }

  render() {

  const myData = this.state.reservas
  const pushData = (username)  => {
    this.setState({username })
    }

    const user = this.state.username

    return (
      <IonPage>
        <IonHeader>
          <IonToolbar color="primary">

          </IonToolbar>
        </IonHeader>
        <IonContent>
          <TabContainer
            history={this.props.history}
            changedTabs={e => this._changedTabs(e)}
            addItem={this._addItem}
            showAddItemModal={this.state.showAddItemModal}
          />
         </IonContent>

        <IonContent> <li> {JSON.stringify({myData})} </li></IonContent>
        <h1>Introduzca la reserva a confirmar:</h1>
        <IonContent>

          <input 
          onChange= {pushData}
           > 
          </input>  

        <IonButton

         onClick={writeUserData( JSON.stringify(user) )}

         > Escribir </IonButton> 
          <IonButton
         onClick={
          send => pushData(send)     
         }
         > Enviar </IonButton> 

         <IonInput/>
         </IonContent>
      </IonPage>
    );
  }
}

export default HomePage

The entire repository is in: https://github.com/progamandoconro/ReactNativeApps/tree/master/Firebase/WebAdmin/src. Thank you.