How to apply specific selected date in react-date-picker within Formik

Question

I am using react-date-picker inside a formik form for validation. I am now trying to work on the update function of my API and need the date info repopulated into the date-picker after selecting one of the database documents. My problem is I don't really understand all of how the date-picker works with formik, so I can't seem to set a selected date programmatically. I am using the code from this answer https://stackoverflow.com/a/58650742/14433233 that gets its answer from this answer Dani Vijay's answer. Shout Out to Dani Vijay.

The code sandboxes on those answers are exactly what I have implemented.

Here is my formik code

import DatePicker from "../componets/DatePicker";
const Bot = () => {
    const test = false
    const {proxyUrl} = useSelector(state => state.proxy)
    const {courseList, priorityList, msg, error, teeDate} = useSelector(state => state.bot)
    const dispatch = useDispatch()
    const today = new Date()
    const paramsSchema = Yup.object({
        date: Yup.date().required('Required').min(new Date(today.getTime() + (7 * 24 * 60 * 60 * 1000)), "Date must be at least seven days ahead"),
        startTime: Yup.string().required('Required'),
        endTime: Yup.string().required('Required'),
        member: Yup.string(),
        clubUsername: Yup.string().required('This field is required to login'),
        clubPassword: Yup.string().required('This field is required to login'),
    })

    const formStyle = {
        marginTop: '100px'
    }

return ( 
        <div className="main">
            <div>

            <h1>Bot Setup</h1>
            <hr />
            <Formik
                style={formStyle}
                initialValues={{
                    date: '',
                    startTime: '',
                    endTime: '',
                    member:'',
                    clubUsername:'',
                    clubPassword:'',
                }}
                validationSchema={paramsSchema}
                // onSubmit send params to backend
                // onSubmit={({pageName, postCount, loggedIn, username, password})=>dispatch(startBot({pageName, postCount, loggedIn, username, password}))}
                // onSubmit={(values)=>console.log({...values, priorityList:priorityList})}
                onSubmit={(values)=>{
                    if(priorityList.length === 0) return window.alert('Priority List Is Required')
                    dispatch(createJob({...values, priorityList:priorityList}))}

                }
                
                
            >
                {({values, errors, touched})=>{
                    return(
                    <Form className="form-center">
                        <div className="date-time-picker">
                            <label className="form-block-label">Intended Date</label>
                            <div class="form-group row">
                            <div class="col">

                            {errors.startDate && touched.startDate ? <div className="error-message">{errors.startDate}</div> : null}
                            {teeDate ? <DatePicker placeholder={new Date("09/19/2022")} className="form-control mt-1" name="date" /> : <DatePicker selected={new Date("09/19/2022")} className="form-control mt-1" name="date" />}
                            </div>

                            </div>

Here is my datepicker code

import React from "react";
import { useField, useFormikContext } from "formik";
import DatePicker from "react-datepicker";

export const DatePickerField = ({ ...props }) => {
  const { setFieldValue } = useFormikContext();
  const [field] = useField(props);
  return (
    <DatePicker
      {...field}
      {...props}
      selected={(field.value && new Date(field.value)) || null}
      onChange={val => {
        setFieldValue(field.name, val);
      }}
    />
  );
};

export default DatePickerField;