Как задать Document ID в firebase основываясь на данных отправляемой формы vue3

Есть код:

import { collection, addDoc } from 'firebase/firestore';
import { requestGiftCard } from '@/firebase';
const name = ref();
const surname = ref();
const email = ref();
const number = ref();
const showAllItems = ref(false);


const handleSubmit = async () => {
    try {
        
        const formDataCollection = requestGiftCard;

       
        await addDoc(formDataCollection, {
            name: name.value,
            surname: surname.value,
            email: email.value,
            number: number.value,
            
        });

        name.value = '';
        surname.value = '';
        email.value = '';
        number.value = '';
        
        console.log('Form data sent successfully!');
        console.log(formDataCollection);
    } catch (error) {
        
        console.error('Error sending form data:', error);
    }
};

Нужно сделать так, чтобы при отправке формы Document ID в коллекции firebase был такой же, как и имя с фамилией, которые были введены в форме.

На самом деле даже не знаю возможно ли такое реализовать, но если возможно, то буду очень благодарен тому, кто напишет, как это сделать.

Попытка реализовать была, но она не успешная:

const documentId = `${name.value}-${surname.value}`;

        // Отправьте данные в коллекцию с уникальным Document ID
        await addDoc(formDataCollection, {
            name: name.value,
            surname: surname.value,
            email: email.value,
            number: number.value,
            // Добавьте другие данные из формы по мере необходимости
        }, { id: documentId });