How do I format ReactJs date picker to look normal?

import React, { useState } from "react";
import DatePicker from "react-datepicker";

function GenericCalendarRange() {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    return (
        <>
            <h4 className="datepicker__title"> From </h4>
            <DatePicker
                selected={startDate}
                onChange={(date) => setStartDate(date)}
                selectsStart
                startDate={startDate}
                endDate={endDate}
            />
            <h4 className="datepicker__title"> To </h4>
            <DatePicker
                selected={endDate}
                onChange={(date) => setEndDate(date)}
                selectsEnd
                startDate={startDate}
                endDate={endDate}
                minDate={startDate}
            />
        </>
    );
}

export default GenericCalendarRange;

My code ends up looking quite odd in the storybook story. Storybook output. Am I missing something? Is there a formatting mistake going on or not being implemented correctly?

from Recent Questions - Stack Overflow https://ift.tt/3kXECws
https://ift.tt/eA8V8J