```
import React, { useState } from 'react'
        import styled from 'styled-components'
        import Title from '../Components/Title'
        import { InnerLayout, MainLayout } from '../Styles/Layout'
        import Button from '../Components/Button'
        import { db } from '../firebase';

        function Contact() {
            const [name, setName] = useState("");
            const [email, setEmail] = useState("");
            const [message, setMessage] = useState("");
            const [subject, setSubject] = useState("");

            const handleSubmit = (e) => {
                e.preventDefault();

                db.collection('mail').add({
                    name: name,
                    email: email,
                    subject: subject,
                    message: message,
                })
                    .then(() => {
                        alert("Thank you for contacting. Your message has been sent successfully.");
                    })
                    .catch((err) => {
                        alert(err.message);
                    });

                setName('')
                setEmail('')
                setSubject('')
                setMessage('')
            };

            return (
                <MainLayout>
                    <Title title={'Contact'} span={'Contact'} />
                    <ContactMain>
                        <InnerLayout className='contact-section'>
                            <div className="left-content">
                                <div className="contact-title">
                                    <h4>Get In Touch</h4>
                                </div>
                                <form className="form" onSubmit={handleSubmit}>
                                    <div className="form-field">
                                        <label htmlFor="name">Enter Your Name</label>
                                        <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="email">Enter Your Email</label>
                                        <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="subject">Enter Your Subject</label>
                                        <input type="text" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
                                    </div>
                                    <div className="form-field">
                                        <label htmlFor="text-area">Enter Your Message</label>
                                        <textarea name="textarea" id="textarea" cols="30" rows="10" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
                                    </div>
                                    <div className="form-field f-button">
                                        <Button title="Send Email" />
                                    </div>
                                </form>
                            </div>
                        </InnerLayout>
                    </ContactMain>
                </MainLayout>

            )
    }

```

I don't know why but I am not able to send the details to my firebase database. I am not able to find the issue in this code. I have copied the firebase database key and all in the firebase.js and then imported it in this contact.js and I then made the necessary changes in this. Still, I am not able to figure out the issue.