Why doesn’t react firestore create a document?

So I’m trying to create a new document containing these inputs, the console logs the right values for these and I don’t get any errors, only the one that I set in the function telling me that the document was not created

import React, { useRef, useState } from 'react'
import { Button, Card, Alert, Form } from 'react-bootstrap'
import { db } from '../firebase'
import { Timestamp, doc, setDoc } from 'firebase/firestore'

function Compose() {

    const emailRef = useRef('')
    const titleRef = useRef('')
    const textRef = useRef('')
    const [error, setError] = useState('')

    const data = {
        recipient: emailRef.current.value,
        title: titleRef.current.value,
        text: textRef.current.value,
        createdAt: Timestamp.fromDate(new Date())
    }

    async function handleSubmit(e) {
        e.preventDefault()

        try {
            setError('')
            await setDoc(doc(db, 'mails'), data)
        }
         catch {
            setError('Failed to send email!')
         }   
    }

  return (
    <>
        <h2>Compose</h2>
        <Card>
            <Card.Body>
                {error && <Alert variant='danger'>{error}</Alert>}
                <Form onSubmit={handleSubmit}>
                    <Form.Group id='email' className='mb-4'>
                        <Form.Label>To:</Form.Label>
                        <Form.Control type='email' ref={emailRef} required className='w-50' placeholder='The recipient'/>
                    </Form.Group>
                    <Form.Group id='title' className='mb-4'>
                        <Form.Label>Title:</Form.Label>
                        <Form.Control type='text' ref={titleRef} required className='w-50' placeholder='Subject'/>
                    </Form.Group>
                    <Form.Group id='body'>
                        <Form.Label>Text:</Form.Label>  
                        <Form.Control as='textarea' ref={textRef} rows='15' required/>
                    </Form.Group>
                    <Button type='submit' className='w-40 mt-4' style={{float:'right'}}>Send</Button>
                </Form>
            </Card.Body>
        </Card>
    </>
  )
}

export default Compose

db is the getFirestore(app)

I’ve tried just creating a document with fixed information on the submit of the form but it still does not work