How to reformat react calendar date

Question

So I am currently creating a website for receptionists and would like the relevant appointments to appear when a date is clicked on react calendar.

Currently, when I console.log the clicked date it appears in the following format: Tue Jun 07 2022 00:00:00 GMT+0200 (South Africa Standard Time)

I would like it to appear instead as: 2022-06-07

This is so that it is coherent with my database.

My code is as follows:

const Calendar = () => {

const CalendarChange = () => {
    console.log("hi");
};

    
const [date, setDate] = useState(new Date());
const onDateChange = (newDate) => {
    // let NewDate = new Intl.DateTimeFormat('en-US').format(date);
    setDate(newDate);

    console.log(newDate);
}

const locale = 'fr-CA';

return (
    <>
       <CalendarContainer>
             <Calendarcom calendarType='US' format="dd-MM-yyyy" className='react-calendar' 
              onChange={onDateChange}           
              value={date} />
         </CalendarContainer>
    </>
 
    );
};

export default Calendar;

Answer 1

Thank you for everyone's help!

I managed to get it working with the following code:

const [date, setDate] = useState(new Date());
const [formatDate, setFormatDate] = useState();

//    console.log(new Intl.DateTimeFormat('en-US').format(date));
const onDateChange = (newDate) => {

    setDate(newDate);
  
}

useEffect(() => {
  console.log(date);
  setFormatDate(new Intl.DateTimeFormat('en-US').format(date));
  console.log(formatDate);
}, [date, onDateChange])