♻️ 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.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.29%. Comparing base (548a1f3) to head (e5b527b).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6238   +/-   ##
=======================================
  Coverage   99.29%   99.29%           
=======================================
  Files          30       30           
  Lines        3822     3822           
  Branches     1648     1665   +17     
=======================================
  Hits         3795     3795           
  Misses         26       26           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.