index.js:373 Uncaught RangeError: Invalid time value at format (index.js:373:1) at AvailableAppointment (AvailableAppointment.js:16:1) at renderWithHooks (react-dom.development.js:16175 :1) 在 updateFunctionComponent (react-dom.development.js:20387:1) 在 beginWork (react-dom.development.js:22430:1) 在 beginWork$1 (react-dom.development.js:27381:1) 在performUnitOfWork (react-dom.development.js:26513:1) at workLoopSync (react-dom.development.js:26422:1) at renderRootSync (react-dom.development.js:26390:1) at recoverFromConcurrentError (react-dom .development.js:25806:1)

import banner from '../../assets/images/chair.png'
import { DayPicker } from 'react-day-picker';
import { format } from 'date-fns';

const AppointmentBanner = ({ selected, setSelected }) => {

    let footer = <p>Please pick a day.</p>;
    if (selected) {
        footer = <p>You picked {format(selected, 'PP')}.</p>;
    }
    return (
        <div>
            <div class="hero min-h-screen ">
                <div class="hero-content flex-col lg:flex-row-reverse">
                    <img src={banner} class="max-w-sm rounded-lg shadow-2xl" alt='dental chair' />
                    <div className='border hover:border-primary rounded-lg mx-12'>
                        <DayPicker
                            mode="single"
                            selected={selected}
                            onselected={setSelected}
                            footer={footer} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AppointmentBanner;