Firebase update collection called with invalid data error

Question

I keep getting an error with firebase with updating the data. I have a default value set for date and time which i do at the bottom with:

value={selectedDate}

My firebase error is

"FirebaseError: Function documentReference.update() called with invalid data. Unsupported field value: undefined (found in field eventName in document groupsCategory"

https://i.stack.imgur.com/ZpuRr.png

const [selectedDate, setSelectedDate] = useState(eventDate)
const [selectedTime, setSelectedTime] = useState(eventTime)
const [updatedEventName, setUpdatedEventName] = useState(eventName)

console.log({ selectedDate: selectedDate && selectedDate.toLocaleDateString() })
console.log({ selectedTime: selectedTime && selectedTime.toLocaleTimeString() })


const updateEvent = () => {

    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

    fire.firestore()
    .collection('groupsCategory')
    .doc(groupID)
    .collection('events')
    .doc(eventID)
    .update({
        eventName: updatedEventName,
        eventDate: selectedDate && selectedDate.toLocaleDateString(undefined, options),
        eventTime: selectedTime && selectedTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
        calendarDate: selectedDate
    })  
    .catch((err) => {
        alert(err)
        console.log(err)
    })
}

The above code is getting the data from the code below:

  </DialogContentText>
                {/* <EventDatePicker/> */}
                <LocalizationProvider dateAdapter={AdapterDateFns}>
                    <Stack spacing={3}>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="group-name"
                            //label="Event Name"
                            type="email"
                            //value={eventName}
                            fullWidth
                            variant="standard"
                            onChange={(e) => setUpdatedEventName(e.target.value)}
                            // className={classes.textField}
                        />
                        <DatePicker
                            label="Event Date"
                           // value={selectedDate}
                            onChange={(newValue) => {
                                setSelectedDate(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                        />
                        <TimePicker
                            label="Event Time"
                            //value={selectedTime}
                            onChange={(newValue) => {
                                setSelectedTime(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                        />
                    </Stack>
                </LocalizationProvider>
            </DialogContent>
            <DialogActions>