Date Range Picker

<State initial={undefined}>
    {([date, setDate]) => (
        <Form>
            <DateRangePicker
                open
                disableCloseOnClickOutside
                value={date}
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>

<State initial={{ start: new Date('02/09/21'), end: new Date('02/16/21') }}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label='Default Value'
                description="Description goes here..."
                value={date}
                onChange={(v) => setDate(v)}
            />
            <Form.DateRangePicker
                label='Min and Max Date'
                minDate={new Date('02/01/21')}
                maxDate={new Date('02/20/21')}
                value={date}
                onChange={(v) => setDate(v)}
                open
                disableCloseOnClickOutside
            />
        </Form>
    )}
</State>

<State initial={{}}>
    {([date, setDate]) => (
        <Form>
            <Form.DateRangePicker
                label="With Placeholder"
                value={date}
                input={{ placeholder: "Select the event's date range" }}
                onChange={(v) => setDate(v)}
            />
        </Form>
    )}
</State>