Good day, I am currently working on a firestore/react app. And I have this form where I set the initial values using spread syntax/operator. Everything is working fine but when I try to store a date value which firestore converts to a timestamp. It crashes my app as it doesn't know how to read it.

My method before was to do it manually. (Setting the initial values then converting the timestamp). But as the form requirements goes complex and needed a lot of date. It becomes harder for me to do it.

    const [targetClient, setTargetClient] = useState([]);

const Data = () => {
    const usersCollectionRef = collection(db, "client");
    onSnapshot(usersCollectionRef, (snapshot) => {
        let userData = []
        snapshot.docs.forEach(doc => {
            userData.push({ ...doc.data(), id: doc.id })
        })
        setTargetClient(userData)
    })
};

useEffect(() => {
    Data();
}, []);

Then I passed it through components using

<ViewClient works={works} />

This is how I just set the initial values.

const initialValues = {

   ...works
}

It works but when it comes to dates it just crashes/error as it would receive a timestamp.

This is how I usually do it manually.

   const conf =     data5.works.Figure4.conforme.date.seconds
   const newconf = new Date(conf*1000)

   const initialValues = {
     name:props.name
      age:props.age
      date1:conf 

         }

Can anyone give me idea/guide on how to proceed?

Forgot to add that I am using a custom date component.

export default function DatePicker(props) {
const { label, name } = props
return (
    <>
        <FormLabel>{label}</FormLabel>
        <Field name={name} >
            {
                ({ form, field }) => {
                    const { setFieldValue } = form
                    const { value } = field
                    return (
                        <DateView
                            className="chakra-input css-1c6j008"
                            id={name}
                            {...field}
                            selected={value}
                            onChange={val => setFieldValue(name, val)}
                            // minDate={new Date()}
                            // dateFormat='dd/MM/yyyy'
                            isClearable
                            peekNextMonth
                            showMonthDropdown
                            showYearDropdown
                            dropdownMode="select"
                        />
                    )
                }
            }
        </Field>
        <ErrorMessaging name={name} />
    </>
)

}