Calendar - onChange return the string the same as is displayed in the field

[WilliamStam]

i havent had any luck finding the answers. apologies if its "obvious".

const [date, setDate] = useState('2024-08-01');
return (
        <>
            <Calendar
                value={date}
                onChange={(e) => {
                    setDate(e.value);
                    console.log(e.value)
                }}
                dateFormat="yy-mm-dd"
            />
            <div>
                {date.toString()}
            </div>
      </>
)

issues i need help with:

1. the input doesn't load up the initial state value (2024-08-01 in this case)
   
   (input is empty yet date value is there)

2. {date.toString()} comes up as a date object. Tue Sep 03 2024 00:00:00 GMT+0200 (South Africa Standard Time) how do i get it to be the same as what gets displayed inside the field?
   
   (in this case im expecting onChange={(e) =>setDate(e.value)} setDate() to "save" 2024-09-12

[WilliamStam]

im aware i can take the date object and then "build" a string from that but that will always be disjointed from the actual component's value. as in if format is ever changed in dateFormat then it will need to be updated as well in the date to string function.

i also tried looking at the actual input via ref and item.current.value but that didnt help either