Not able to store the values into Firebase using react

I am new to React and Javascript.I am developing a meet-up application that has a form and when I fill its values and press submit,it should store the values into firebase.I am using fetch API and passing the values using POST method.The folder structure is shown below:

The form data is in NewMeetupForm.js shown below:
NewMeetupForm.js

import {useRef} from 'react';
import Card from "../ui/Card";
import classes from "./newmeetupformmodule.css";
function NewMeetupForm(props){

    const titleinput=useRef();
    const imageinput=useRef();
    
    function submitHandler(event){

        event.preventDefault();
        const enteredtitle=titleinput.current.value;
        const enteredimage=imageinput.current.value;            

        const meetupdata={
            title:enteredtitle,
            image:enteredimage,
        }
        console.log(meetupdata);
        props.onAddMeetup(meetupdata);

    }
return <Card>
    <form className={classes.form} onSubmit={submitHandler}>
    <div className={classes.control}>
        <label htmlFor="title" >Meetup Title</label>
        <input type="text" required id="title" ref={titleinput}></input>
    </div>
    <div className={classes.control}>
        <label htmlFor="image" >Meetup Image</label>
        <input type="url" required id="image" ref={imageinput}></input>
    </div>
    <div className={classes.control}>
        <button>Add meetup</button>
    </div>
    </form>
    </Card>

}
export default NewMeetupForm;

But when I run the application in browser and pass values,I see null in firebase.I
The file where I pass the db url is shown below:
Newmeetup.js:

import NewMeetupForm from "../components/Meetups/NewMeetupForm";


function NewmeetupPage() {
           
  function addmeetuphandler(meetupdata) {
    fetch(
      'https://react-getting-started-e38d3-default-rtdb.firebaseio.com/meetup.json',
      {
        method:'POST',
        body:JSON.stringify(meetupdata),
        headers: { 'Content-Type': 'application/json' }
      }
    );
  }
  return (
    <section>
      <h1>Addnewmeetup</h1>
      <NewMeetupForm onAddMeetup={addmeetuphandler} />
    </section>
  );
}

export default NewmeetupPage;

When I run the app in broswer and pass the values in form and click on submit,no table is created in firebase.I just get a null value.The screenshot is shown below:

The rules is also shown below:

Also,for reference,my github link to the project:https://github.com/suchitraa/Reactlatest .I get a null value in Firebase instead of the values getting stored.Could anyone please help me out with this?