React Form Datepicker not reseting

Question

First time post here from a junior dev. I have not been able to get this datepicker to reset to null(back to placeholder text) when pressing the "Clear Dates" button. I have tried to clear the fields from the form and also by changing the state of the inputs but no luck. Any ideas? Thank you in advance!!

import React from "react";
import { Button } from "react-bootstrap";
import moment from "moment-timezone";
import { useEffect, useState } from "react";

import { CdsForm, CdsDateField } from "internal-design";
import * as yup from "yup";

const DateRangePicker = ({
  startDate,
  setStartDate,
  endDate,
  setEndDate,
  submit,
  handleClearDate,
  handleSearchDates,
}) => {
  const [todayMinusThreeYears, setTodayMinusThreeYears] = useState();
  const [today, setToday] = useState();
  const [initialDate, setInitialDate] = useState(null);

  useEffect(() => {
    setInitialDate(null)
    },[])

  const onChangeDateHandlerStart = (value) => {
    setStartDate(moment(value).format("MM DD YYYY"));
  };
  
  const onChangeDateHandlerEnd = (value) => {
    setEndDate(moment(value).format("MM DD YYYY"));
  };

  const clearDates = async () => {
    setStartDate(null);
    setEndDate(null);
    setInitialDate();
    handleClearDate();
  };
 
  useEffect(() => {
    const currentDate = new Date();

    function subtractYears(date, years) {
      date.setFullYear(date.getFullYear() - years);
      return date;
    }
    
    setTodayMinusThreeYears(subtractYears(currentDate, 3));
    setToday(new Date());
  }, []);

  const formSchema = yup.object().shape({
          startDate: yup.date().required("This date is required"),
          endDate: yup.date().required("This date is required"),
    });   

  return (
    <>
    <CdsForm schema={formSchema}>
      <div className="d-flex flex-row">
        <div className="flex-column pe-3">
          <CdsDateField
              label="From:"
              name="startDate"
              key="startDate"
              id="startDate"
              onChange={onChangeDateHandlerStart}
              initialDate={initialDate}
              showIcon={true}
              placeholder={"mm/dd/yyyy"}
              minDate={todayMinusThreeYears}
              maxDate={today}
              >
            </CdsDateField>
        </div>
        <div className="flex-column pe-3">
          <CdsDateField
              label="To:"
              name="endDate"
              key="endDate"
              id="endDate"
              onChange={onChangeDateHandlerEnd}
              initialDate={initialDate}
              showIcon={true}
              placeholder={"mm/dd/yyyy"}
              minDate={todayMinusThreeYears}
              maxDate={today}
              >
            </CdsDateField>
        </div>
        <div className="flex-column align-self-end">
          <Button
            hasIconOnly
            type="submit"
            iconDescription="Search Work Period"
            size="md"
            kind="primary"
            onSubmit={submit}
          >
            Search
          </Button>
      </div>
      </div>

        <Button variant="link" size="sm" onClick={clearDates}>
          Clear Dates
        </Button>

      </CdsForm>
    </>
  );
};

export default DateRangePicker;