Assigning value from setState to a variable in React js component

In the middle of a slightly long component which is basically a split date input (3 inputs for DD/MM/YYYY) - I think my approach is correct for the most part, but I'm struggling with my getDate function. The idea is that the currentDate is passed into this function (whatever has been entered in the keyboard), like so:

  const handleValueChange = (date?: string) => {
    onValueChange(getDate(date));
  };

In the getDate function I want to take the values from selectedDay, selectedMonth & selectedYear and assign them to variables so that they can then be joined using the .join method and a valid date like "28-08-2022" can be returned.

Can anyone advise on a best possible approach?

const getDate = (date?: string): string => {
  if (date) {
    /* need to take value for DD/ MM / YYYY and store them in 
    individual variables that can then be used in an array or 
    something similar with .join to return a 
    joined up date like "28-09-2022" */
  }

  return "";
};

const DateInput = ({
  dateInputValue,
  dateInputFormat,
  className,
  inFilterContext,
  onChange,
  onValueChange,
  value = "",
  type = "text",
  readOnly = false,
  disabled = false,
  placeholder,
  mindate,
  maxdate,
  ...inputProps
}: Props) => {
  const [intialDayValue, initialMonthValue, initialYearValue] =
    dateInputValue.split("-");
  const [selectedDay, setSelectedDay] = useState(intialDayValue || "");
  const [selectedMonth, setSelectedMonth] = useState(initialMonthValue || "");
  const [selectedYear, setSelectedYear] = useState(initialYearValue || "");

  const handleValueChange = (date?: string) => {
    onValueChange(getDate(date));
  };

  // handle date input change event - DAY
  const handleDayChangeEvent = (e: SyntheticInputEvent<any>) => {
    const currentDate = e.target.value;

    setSelectedDay(currentDate);
    handleValueChange(currentDate);
  };

  // handle date input change event - MONTH
  const handleMonthChangeEvent = (e: SyntheticInputEvent<any>) => {
    const currentDate = e.target.value;

    setSelectedMonth(currentDate);
    handleValueChange(currentDate);
  };

  // handle date input change event - YEAR
  const handleYearChangeEvent = (e: SyntheticInputEvent<any>) => {
    const currentDate = e.target.value;

    setSelectedYear(currentDate);
    handleValueChange(currentDate);
  };

  return (
    <StyledInputGroup>
      <label htmlFor={`${name}_day`}>
        <span>Day</span>
        <StyledInput
          {...inputProps}
          type={type}
          maxLength="2"
          disabled={disabled}
          readOnly={readOnly}
          value={selectedDay}
          onChange={handleDayChangeEvent}
          onValueChange={handleDateSelectDay}
        />
      </label>
      <label htmlFor={`${name}_month`}>
        <span>Month</span>
        <StyledInput
          {...inputProps}
          type={type}
          maxLength="2"
          disabled={disabled}
          readOnly={readOnly}
          value={selectedMonth}
          onChange={handleMonthChangeEvent}
          onValueChange={handleDateSelectMonth}
        />
      </label>
      <label htmlFor={`${name}_year`}>
        <span>Year</span>
        <StyledInput
          {...inputProps}
          type={type}
          maxLength="4"
          disabled={disabled}
          readOnly={readOnly}
          value={selectedYear}
          onChange={handleYearChangeEvent}
        />
      </label>
    </StyledInputGroup>
  );