♻️ Align Time Picker header styling with Date Picker header

[balajis-qb]

Description

Problem
As highlighted in the below image, there is a small mismatch between the DatePicker's header and TimePicker's header.

Code

const Default = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const handleChange = (date: Date | null) => {
    setSelectedDate(date);
  };

  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleChange}
      showTimeSelect
    />
  );
};

Changes

• Update the Time Select header to be same as the DatePicker's Header
• Refactored the time header from a div to an h2 element for better semantic structure.
• Added a test to ensure the default time caption is rendered correctly.

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.