diff --git a/docs-site/src/examples/calendarContainer.js b/docs-site/src/examples/calendarContainer.js
index 5bb2563024..6efefff24e 100644
--- a/docs-site/src/examples/calendarContainer.js
+++ b/docs-site/src/examples/calendarContainer.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const MyContainer = ({ className, children }) => {
     return (
       <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
@@ -14,8 +14,8 @@
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarContainer={MyContainer}
     />
   );
diff --git a/docs-site/src/examples/calendarIcon.js b/docs-site/src/examples/calendarIcon.js
index e94873b8d3..6b216e9070 100644
--- a/docs-site/src/examples/calendarIcon.js
+++ b/docs-site/src/examples/calendarIcon.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/calendarIconExternal.js
index f3e6f6b26d..5a956df968 100644
--- a/docs-site/src/examples/calendarIconExternal.js
+++ b/docs-site/src/examples/calendarIconExternal.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       icon="fa fa-calendar"
     />
   );
diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/calendarIconSvgIcon.js
index ffd88f8bc3..ef833ac89a 100644
--- a/docs-site/src/examples/calendarIconSvgIcon.js
+++ b/docs-site/src/examples/calendarIconSvgIcon.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/docs-site/src/examples/calendarStartDay.js b/docs-site/src/examples/calendarStartDay.js
index 9552124d92..3242c35dc0 100644
--- a/docs-site/src/examples/calendarStartDay.js
+++ b/docs-site/src/examples/calendarStartDay.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarStartDay={3}
     />
   );
diff --git a/docs-site/src/examples/children.js b/docs-site/src/examples/children.js
index c7b8475250..0a58c2cf3d 100644
--- a/docs-site/src/examples/children.js
+++ b/docs-site/src/examples/children.js
@@ -1,7 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)}>
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+    >
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
   );
diff --git a/docs-site/src/examples/clearInput.js b/docs-site/src/examples/clearInput.js
index 759304f4f6..1877af9f99 100644
--- a/docs-site/src/examples/clearInput.js
+++ b/docs-site/src/examples/clearInput.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       isClearable
       placeholderText="I have been cleared!"
     />
diff --git a/docs-site/src/examples/closeOnScroll.js b/docs-site/src/examples/closeOnScroll.js
index 4deabe1d90..4594838439 100644
--- a/docs-site/src/examples/closeOnScroll.js
+++ b/docs-site/src/examples/closeOnScroll.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       closeOnScroll={true}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/closeOnScrollCallback.js b/docs-site/src/examples/closeOnScrollCallback.js
index d9a3576d34..9639f61751 100644
--- a/docs-site/src/examples/closeOnScrollCallback.js
+++ b/docs-site/src/examples/closeOnScrollCallback.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       closeOnScroll={(e) => e.target === document}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/configureFloatingUI.js b/docs-site/src/examples/configureFloatingUI.js
index eb8311fd73..19f5bcd548 100644
--- a/docs-site/src/examples/configureFloatingUI.js
+++ b/docs-site/src/examples/configureFloatingUI.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[
diff --git a/docs-site/src/examples/customCalendarClassName.js b/docs-site/src/examples/customCalendarClassName.js
index 8e951036d7..0f1f25134c 100644
--- a/docs-site/src/examples/customCalendarClassName.js
+++ b/docs-site/src/examples/customCalendarClassName.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       calendarClassName="rasta-stripes"
     />
   );
diff --git a/docs-site/src/examples/customClassName.js b/docs-site/src/examples/customClassName.js
index 11a3521e4c..c727dfbe57 100644
--- a/docs-site/src/examples/customClassName.js
+++ b/docs-site/src/examples/customClassName.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       className="red-border"
     />
   );
diff --git a/docs-site/src/examples/customDateFormat.js b/docs-site/src/examples/customDateFormat.js
index 562735b69b..528b01d47f 100644
--- a/docs-site/src/examples/customDateFormat.js
+++ b/docs-site/src/examples/customDateFormat.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       dateFormat="yyyy/MM/dd"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/customDayClassName.js b/docs-site/src/examples/customDayClassName.js
index 989a7cbc9e..c445391500 100644
--- a/docs-site/src/examples/customDayClassName.js
+++ b/docs-site/src/examples/customDayClassName.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dayClassName={(date) =>
         getDate(date) < Math.random() * 31 ? "random" : undefined
       }
diff --git a/docs-site/src/examples/customInput.js b/docs-site/src/examples/customInput.js
index 7312003114..14de55471f 100644
--- a/docs-site/src/examples/customInput.js
+++ b/docs-site/src/examples/customInput.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const ExampleCustomInput = forwardRef(
     ({ value, onClick, className }, ref) => (
       <button className={className} onClick={onClick} ref={ref}>
@@ -9,8 +9,8 @@
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );
diff --git a/docs-site/src/examples/customTimeClassName.js b/docs-site/src/examples/customTimeClassName.js
index 8c53ea413e..433f967000 100644
--- a/docs-site/src/examples/customTimeClassName.js
+++ b/docs-site/src/examples/customTimeClassName.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
 
   let handleColor = (time) => {
     return time.getHours() > 12 ? "text-success" : "text-error";
@@ -8,8 +8,8 @@
   return (
     <DatePicker
       showTimeSelect
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       timeClassName={handleColor}
     />
   );
diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/customTimeInput.js
index 4cb543ed05..e328c0fa95 100644
--- a/docs-site/src/examples/customTimeInput.js
+++ b/docs-site/src/examples/customTimeInput.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const ExampleCustomTimeInput = ({ value, onChange }) => (
     <input
       value={value}
@@ -10,8 +10,8 @@
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />
diff --git a/docs-site/src/examples/default.js b/docs-site/src/examples/default.js
index d3dc5e291d..7d305e9915 100644
--- a/docs-site/src/examples/default.js
+++ b/docs-site/src/examples/default.js
@@ -1,6 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
-    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+    <DatePicker
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
+    />
   );
 };
diff --git a/docs-site/src/examples/disabled.js b/docs-site/src/examples/disabled.js
index 237316a241..30c5b8d4ee 100644
--- a/docs-site/src/examples/disabled.js
+++ b/docs-site/src/examples/disabled.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       disabled
       placeholderText="This is disabled"
     />
diff --git a/docs-site/src/examples/disabledKeyboardNavigation.js b/docs-site/src/examples/disabledKeyboardNavigation.js
index e8e8b4942d..bab3f237cb 100644
--- a/docs-site/src/examples/disabledKeyboardNavigation.js
+++ b/docs-site/src/examples/disabledKeyboardNavigation.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       disabledKeyboardNavigation
       placeholderText="This has disabled keyboard navigation"
     />
diff --git a/docs-site/src/examples/dontCloseOnSelect.js b/docs-site/src/examples/dontCloseOnSelect.js
index 04807cad1e..2ac91c68d9 100644
--- a/docs-site/src/examples/dontCloseOnSelect.js
+++ b/docs-site/src/examples/dontCloseOnSelect.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       shouldCloseOnSelect={false}
     />
   );
diff --git a/docs-site/src/examples/excludeDateIntervals.js b/docs-site/src/examples/excludeDateIntervals.js
index 616457e895..6c9f1e6e8d 100644
--- a/docs-site/src/examples/excludeDateIntervals.js
+++ b/docs-site/src/examples/excludeDateIntervals.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDateIntervals={[
         { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
       ]}
diff --git a/docs-site/src/examples/excludeDates.js b/docs-site/src/examples/excludeDates.js
index 5934b2412a..ed781e2a43 100644
--- a/docs-site/src/examples/excludeDates.js
+++ b/docs-site/src/examples/excludeDates.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDates={[new Date(), subDays(new Date(), 1)]}
       placeholderText="Select a date other than today or yesterday"
     />
diff --git a/docs-site/src/examples/excludeDatesMonthPicker.js b/docs-site/src/examples/excludeDatesMonthPicker.js
index 13a0a0a256..fc65ee2a6e 100644
--- a/docs-site/src/examples/excludeDatesMonthPicker.js
+++ b/docs-site/src/examples/excludeDatesMonthPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date("2024-08-01"));
+  const [selectedDate, setSelectedDate] = useState(new Date("2024-08-01"));
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       excludeDates={[new Date("2024-05-01"), new Date("2024-06-01")]}
       showMonthYearPicker
diff --git a/docs-site/src/examples/excludeDatesWithMessage.js b/docs-site/src/examples/excludeDatesWithMessage.js
index 59ab497926..1eb8f04d87 100644
--- a/docs-site/src/examples/excludeDatesWithMessage.js
+++ b/docs-site/src/examples/excludeDatesWithMessage.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       excludeDates={[
         { date: new Date(), message: "Today is excluded" },
         { date: subDays(new Date(), 1), message: "This day is excluded" },
diff --git a/docs-site/src/examples/excludeTimePeriod.js b/docs-site/src/examples/excludeTimePeriod.js
index a10233b705..2d805b1479 100644
--- a/docs-site/src/examples/excludeTimePeriod.js
+++ b/docs-site/src/examples/excludeTimePeriod.js
@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 17),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
       maxTime={setHours(setMinutes(new Date(), 30), 20)}
diff --git a/docs-site/src/examples/excludeTimes.js b/docs-site/src/examples/excludeTimes.js
index 2e9271632a..8763337af0 100644
--- a/docs-site/src/examples/excludeTimes.js
+++ b/docs-site/src/examples/excludeTimes.js
@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       excludeTimes={[
         setHours(setMinutes(new Date(), 0), 17),
diff --git a/docs-site/src/examples/excludeWeeks.js b/docs-site/src/examples/excludeWeeks.js
index 0694be1b67..6872919783 100644
--- a/docs-site/src/examples/excludeWeeks.js
+++ b/docs-site/src/examples/excludeWeeks.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+  const [selectedDate, setSelectedDate] = useState(new Date("2021/02/22"));
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="I/R"
       locale="en-GB"
       excludeDateIntervals={[
diff --git a/docs-site/src/examples/externalForm.js b/docs-site/src/examples/externalForm.js
index 3b1e906a8a..b1feb81ac0 100644
--- a/docs-site/src/examples/externalForm.js
+++ b/docs-site/src/examples/externalForm.js
@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
 
   return (
     <>
       <DatePicker
-        selected={startDate}
-        onChange={(date) => setStartDate(date)}
+        selected={selectedDate}
+        onChange={(date) => setSelectedDate(date)}
         required
         form="external-form"
       />
diff --git a/docs-site/src/examples/filterDates.js b/docs-site/src/examples/filterDates.js
index 9eb67a0084..5188587dba 100644
--- a/docs-site/src/examples/filterDates.js
+++ b/docs-site/src/examples/filterDates.js
@@ -1,13 +1,13 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   const isWeekday = (date) => {
     const day = getDay(date);
     return day !== 0 && day !== 6;
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       filterDate={isWeekday}
       placeholderText="Select a weekday"
     />
diff --git a/docs-site/src/examples/filterTimes.js b/docs-site/src/examples/filterTimes.js
index 3d95eb584b..20d67d40df 100644
--- a/docs-site/src/examples/filterTimes.js
+++ b/docs-site/src/examples/filterTimes.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 0), 9),
   );
   const filterPassedTime = (time) => {
@@ -10,8 +10,8 @@
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       filterTime={filterPassedTime}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/fixedCalendar.js b/docs-site/src/examples/fixedCalendar.js
index 30eb818e87..e150be96a2 100644
--- a/docs-site/src/examples/fixedCalendar.js
+++ b/docs-site/src/examples/fixedCalendar.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       fixedHeight
     />
   );
diff --git a/docs-site/src/examples/hideTimeCaption.js b/docs-site/src/examples/hideTimeCaption.js
index 214c7420ad..bcdfdb913b 100644
--- a/docs-site/src/examples/hideTimeCaption.js
+++ b/docs-site/src/examples/hideTimeCaption.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/highlightDates.js b/docs-site/src/examples/highlightDates.js
index 27bc91c8c8..45ef22fca5 100644
--- a/docs-site/src/examples/highlightDates.js
+++ b/docs-site/src/examples/highlightDates.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       highlightDates={[subDays(new Date(), 7), addDays(new Date(), 7)]}
       placeholderText="This highlights a week ago and a week from today"
     />
diff --git a/docs-site/src/examples/highlightDatesRanges.js b/docs-site/src/examples/highlightDatesRanges.js
index 9035e1318b..2a09b480a2 100644
--- a/docs-site/src/examples/highlightDatesRanges.js
+++ b/docs-site/src/examples/highlightDatesRanges.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const highlightWithRanges = [
     {
       "react-datepicker__day--highlighted-custom-1": [
@@ -20,8 +20,8 @@
   ];
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       highlightDates={highlightWithRanges}
       placeholderText="This highlight two ranges with custom classes"
     />
diff --git a/docs-site/src/examples/holidayDates.js b/docs-site/src/examples/holidayDates.js
index 32c667ecff..d04b73b020 100644
--- a/docs-site/src/examples/holidayDates.js
+++ b/docs-site/src/examples/holidayDates.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       holidays={[
         { date: "2023-08-15", holidayName: "India's Independence Day" },
         { date: "2023-12-31", holidayName: "New Year's Eve" },
diff --git a/docs-site/src/examples/includeDateIntervals.js b/docs-site/src/examples/includeDateIntervals.js
index 3a22fa9222..c75ec1bfe4 100644
--- a/docs-site/src/examples/includeDateIntervals.js
+++ b/docs-site/src/examples/includeDateIntervals.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       includeDateIntervals={[
         { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
       ]}
diff --git a/docs-site/src/examples/includeDates.js b/docs-site/src/examples/includeDates.js
index d4b177668c..a2f836eb61 100644
--- a/docs-site/src/examples/includeDates.js
+++ b/docs-site/src/examples/includeDates.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       includeDates={[new Date(), addDays(new Date(), 1)]}
       placeholderText="This only includes today and tomorrow"
     />
diff --git a/docs-site/src/examples/includeDatesMonthPicker.js b/docs-site/src/examples/includeDatesMonthPicker.js
index 4257e5bd83..ab70815b89 100644
--- a/docs-site/src/examples/includeDatesMonthPicker.js
+++ b/docs-site/src/examples/includeDatesMonthPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(1661990400000);
+  const [selectedDate, setSelectedDate] = useState(1661990400000);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       includeDates={[
         1661990400000, 1664582400000, 1667260800000, 1672531200000,
diff --git a/docs-site/src/examples/includeTimes.js b/docs-site/src/examples/includeTimes.js
index 5ceece61e0..93392ab543 100644
--- a/docs-site/src/examples/includeTimes.js
+++ b/docs-site/src/examples/includeTimes.js
@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       includeTimes={[
         setHours(setMinutes(new Date(), 0), 17),
diff --git a/docs-site/src/examples/injectTimes.js b/docs-site/src/examples/injectTimes.js
index eb83aff185..4dc5d46d1b 100644
--- a/docs-site/src/examples/injectTimes.js
+++ b/docs-site/src/examples/injectTimes.js
@@ -1,11 +1,11 @@
 () => {
-  const [startDate, setStartDate] = useState(
+  const [selectedDateTime, setSelectedDateTime] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       timeFormat="HH:mm:ss"
       injectTimes={[
diff --git a/docs-site/src/examples/inline.js b/docs-site/src/examples/inline.js
index 0034f5dcb3..ed1320d6e7 100644
--- a/docs-site/src/examples/inline.js
+++ b/docs-site/src/examples/inline.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       inline
     />
   );
diff --git a/docs-site/src/examples/inlineVisible.js b/docs-site/src/examples/inlineVisible.js
index 9649f919d7..2a11e74cd8 100644
--- a/docs-site/src/examples/inlineVisible.js
+++ b/docs-site/src/examples/inlineVisible.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const [isOpen, setIsOpen] = useState(false);
   const handleChange = (e) => {
     setIsOpen(!isOpen);
-    setStartDate(e);
+    setSelectedDate(e);
   };
   const handleClick = (e) => {
     e.preventDefault();
@@ -12,10 +12,10 @@
   return (
     <>
       <button className="example-custom-input" onClick={handleClick}>
-        {format(startDate, "dd-MM-yyyy")}
+        {format(selectedDate, "dd-MM-yyyy")}
       </button>
       {isOpen && (
-        <DatePicker selected={startDate} onChange={handleChange} inline />
+        <DatePicker selected={selectedDate} onChange={handleChange} inline />
       )}
     </>
   );
diff --git a/docs-site/src/examples/locale.js b/docs-site/src/examples/locale.js
index 9761958de9..3ab89d2ebe 100644
--- a/docs-site/src/examples/locale.js
+++ b/docs-site/src/examples/locale.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       locale="en-GB"
       placeholderText="Weeks start on Monday"
     />
diff --git a/docs-site/src/examples/localeWithTime.js b/docs-site/src/examples/localeWithTime.js
index 9e6338eb66..8705ce1965 100644
--- a/docs-site/src/examples/localeWithTime.js
+++ b/docs-site/src/examples/localeWithTime.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       locale="pt-BR"
       showTimeSelect
       timeFormat="p"
diff --git a/docs-site/src/examples/localeWithoutGlobalVariable.js b/docs-site/src/examples/localeWithoutGlobalVariable.js
index 2f03ebb755..0401483fe6 100644
--- a/docs-site/src/examples/localeWithoutGlobalVariable.js
+++ b/docs-site/src/examples/localeWithoutGlobalVariable.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       locale={fi}
     />
   );
diff --git a/docs-site/src/examples/maxDate.js b/docs-site/src/examples/maxDate.js
index bbe11c0c12..88c88f6110 100644
--- a/docs-site/src/examples/maxDate.js
+++ b/docs-site/src/examples/maxDate.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       maxDate={addDays(new Date(), 5)}
       placeholderText="Select a date before 5 days in the future"
     />
diff --git a/docs-site/src/examples/minDate.js b/docs-site/src/examples/minDate.js
index 3183efe325..15d610bdfd 100644
--- a/docs-site/src/examples/minDate.js
+++ b/docs-site/src/examples/minDate.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       minDate={subDays(new Date(), 5)}
       placeholderText="Select a date after 5 days ago"
     />
diff --git a/docs-site/src/examples/monthDropdown.js b/docs-site/src/examples/monthDropdown.js
index 4c0b8421d1..4f73efb77f 100644
--- a/docs-site/src/examples/monthDropdown.js
+++ b/docs-site/src/examples/monthDropdown.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showMonthDropdown
     />
   );
diff --git a/docs-site/src/examples/monthDropdownShort.js b/docs-site/src/examples/monthDropdownShort.js
index 2efd131b3e..13f068ebe5 100644
--- a/docs-site/src/examples/monthDropdownShort.js
+++ b/docs-site/src/examples/monthDropdownShort.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showMonthDropdown
       useShortMonthInDropdown
     />
diff --git a/docs-site/src/examples/monthPicker.js b/docs-site/src/examples/monthPicker.js
index d6274f9743..0e4a9a8b50 100644
--- a/docs-site/src/examples/monthPicker.js
+++ b/docs-site/src/examples/monthPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
     />
diff --git a/docs-site/src/examples/monthPickerFourColumns.js b/docs-site/src/examples/monthPickerFourColumns.js
index 235e4a3eb8..d6c8ad9888 100644
--- a/docs-site/src/examples/monthPickerFourColumns.js
+++ b/docs-site/src/examples/monthPickerFourColumns.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/monthPickerFullName.js b/docs-site/src/examples/monthPickerFullName.js
index 1d424bab41..8ef7c80f16 100644
--- a/docs-site/src/examples/monthPickerFullName.js
+++ b/docs-site/src/examples/monthPickerFullName.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/monthPickerTwoColumns.js b/docs-site/src/examples/monthPickerTwoColumns.js
index d2d41d0d43..b66ceadc1c 100644
--- a/docs-site/src/examples/monthPickerTwoColumns.js
+++ b/docs-site/src/examples/monthPickerTwoColumns.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/monthYearDropdown.js b/docs-site/src/examples/monthYearDropdown.js
index 664f5d4ecc..9e21d6dbcb 100644
--- a/docs-site/src/examples/monthYearDropdown.js
+++ b/docs-site/src/examples/monthYearDropdown.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormatCalendar={"MMM yyyy"}
       minDate={subMonths(new Date(), 6)}
       maxDate={addMonths(new Date(), 6)}
diff --git a/docs-site/src/examples/multiMonth.js b/docs-site/src/examples/multiMonth.js
index 14245cb84d..92b8e44e9f 100644
--- a/docs-site/src/examples/multiMonth.js
+++ b/docs-site/src/examples/multiMonth.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/multiMonthDropdown.js b/docs-site/src/examples/multiMonthDropdown.js
index b9c5c4226c..ec3f89c49d 100644
--- a/docs-site/src/examples/multiMonthDropdown.js
+++ b/docs-site/src/examples/multiMonthDropdown.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       monthsShown={2}
       showYearDropdown
     />
diff --git a/docs-site/src/examples/multiMonthInline.js b/docs-site/src/examples/multiMonthInline.js
index c612cde763..2e9d132ff0 100644
--- a/docs-site/src/examples/multiMonthInline.js
+++ b/docs-site/src/examples/multiMonthInline.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       monthsShown={2}
       inline
     />
diff --git a/docs-site/src/examples/multiMonthPrevious.js b/docs-site/src/examples/multiMonthPrevious.js
index b68a657cbd..5f53557db6 100644
--- a/docs-site/src/examples/multiMonthPrevious.js
+++ b/docs-site/src/examples/multiMonthPrevious.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
+      selected={selectedDate}
       showPreviousMonths
-      onChange={(date) => setStartDate(date)}
+      onChange={(date) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/noAnchorArrow.js b/docs-site/src/examples/noAnchorArrow.js
index 0c66e1359b..6d9887b02b 100644
--- a/docs-site/src/examples/noAnchorArrow.js
+++ b/docs-site/src/examples/noAnchorArrow.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       showPopperArrow={false}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/onBlurCallbacks.js b/docs-site/src/examples/onBlurCallbacks.js
index 064af8dcf7..46557ac732 100644
--- a/docs-site/src/examples/onBlurCallbacks.js
+++ b/docs-site/src/examples/onBlurCallbacks.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   const handleOnBlur = ({ target: { value } }) => {
     const date = new Date(value);
     if (isValid(date)) {
@@ -11,8 +11,8 @@
   return (
     <DatePicker
       key="example9"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       onBlur={handleOnBlur}
       placeholderText="View blur callbacks in console"
     />
diff --git a/docs-site/src/examples/onCalendarOpenStateCallbacks.js b/docs-site/src/examples/onCalendarOpenStateCallbacks.js
index 6b108db8bd..7608902918 100644
--- a/docs-site/src/examples/onCalendarOpenStateCallbacks.js
+++ b/docs-site/src/examples/onCalendarOpenStateCallbacks.js
@@ -1,13 +1,13 @@
 () => {
-  const [date, setDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
 
   const handleCalendarClose = () => console.log("Calendar closed");
   const handleCalendarOpen = () => console.log("Calendar opened");
 
   return (
     <DatePicker
-      selected={date}
-      onChange={(date) => setDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       onCalendarClose={handleCalendarClose}
       onCalendarOpen={handleCalendarOpen}
     />
diff --git a/docs-site/src/examples/openToDate.js b/docs-site/src/examples/openToDate.js
index a013629ef3..0e862c3d1c 100644
--- a/docs-site/src/examples/openToDate.js
+++ b/docs-site/src/examples/openToDate.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       openToDate={new Date("1993/09/28")}
     />
   );
diff --git a/docs-site/src/examples/portal.js b/docs-site/src/examples/portal.js
index bbc323322a..485e3dc6b7 100644
--- a/docs-site/src/examples/portal.js
+++ b/docs-site/src/examples/portal.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       withPortal
     />
   );
diff --git a/docs-site/src/examples/portalById.js b/docs-site/src/examples/portalById.js
index cebf037bda..725c592a0d 100644
--- a/docs-site/src/examples/portalById.js
+++ b/docs-site/src/examples/portalById.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       portalId="root-portal"
     />
   );
diff --git a/docs-site/src/examples/quarterPicker.js b/docs-site/src/examples/quarterPicker.js
index 2282145530..e8df74afa7 100644
--- a/docs-site/src/examples/quarterPicker.js
+++ b/docs-site/src/examples/quarterPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="yyyy, QQQ"
       showQuarterYearPicker
     />
diff --git a/docs-site/src/examples/rawChange.js b/docs-site/src/examples/rawChange.js
index 6d37c40555..bb76f3b781 100644
--- a/docs-site/src/examples/rawChange.js
+++ b/docs-site/src/examples/rawChange.js
@@ -1,14 +1,14 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   const handleChangeRaw = (value) => {
     if (value === "tomorrow") {
-      setStartDate(addDays(new Date(), 1));
+      setSelectedDate(addDays(new Date(), 1));
     }
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       placeholderText='Enter "tomorrow"'
       onChangeRaw={(event) => handleChangeRaw(event.target.value)}
     />
diff --git a/docs-site/src/examples/readOnly.js b/docs-site/src/examples/readOnly.js
index 09b65e4a15..4ca47e1eec 100644
--- a/docs-site/src/examples/readOnly.js
+++ b/docs-site/src/examples/readOnly.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       placeholderText="This is readOnly"
       readOnly
     />
diff --git a/docs-site/src/examples/renderCustomDay.js b/docs-site/src/examples/renderCustomDay.js
index e3fe960224..db0be11d37 100644
--- a/docs-site/src/examples/renderCustomDay.js
+++ b/docs-site/src/examples/renderCustomDay.js
@@ -1,13 +1,13 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const renderDayContents = (day, date) => {
     const tooltipText = `Tooltip for date: ${date}`;
     return <span title={tooltipText}>{getDate(date)}</span>;
   };
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       renderDayContents={renderDayContents}
     />
   );
diff --git a/docs-site/src/examples/renderCustomHeader.js b/docs-site/src/examples/renderCustomHeader.js
index d4216c737b..4194d59f26 100644
--- a/docs-site/src/examples/renderCustomHeader.js
+++ b/docs-site/src/examples/renderCustomHeader.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const years = range(1990, getYear(new Date()) + 1, 1);
   const months = [
     "January",
@@ -65,8 +65,8 @@
           </button>
         </div>
       )}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
index 39e4450674..4094cb1c90 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,5 +1,5 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       renderCustomHeader={({
@@ -49,8 +49,8 @@
           </button>
         </div>
       )}
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/showTime.js b/docs-site/src/examples/showTime.js
index 5cb165731b..5b279a1012 100644
--- a/docs-site/src/examples/showTime.js
+++ b/docs-site/src/examples/showTime.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       timeFormat="HH:mm"
       timeIntervals={15}
diff --git a/docs-site/src/examples/showTimeOnly.js b/docs-site/src/examples/showTimeOnly.js
index 875bce1e36..e6d15cb721 100644
--- a/docs-site/src/examples/showTimeOnly.js
+++ b/docs-site/src/examples/showTimeOnly.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDateTime}
+      onChange={(date) => setSelectedDateTime(date)}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/specificDateRange.js b/docs-site/src/examples/specificDateRange.js
index 1526de88c9..c5059cf4a9 100644
--- a/docs-site/src/examples/specificDateRange.js
+++ b/docs-site/src/examples/specificDateRange.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(null);
+  const [selectedDate, setSelectedDate] = useState(null);
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       minDate={new Date()}
       maxDate={addDays(new Date(), 5)}
       placeholderText="Select a date between today and 5 days in the future"
diff --git a/docs-site/src/examples/strictParsing.js b/docs-site/src/examples/strictParsing.js
index e40769fe30..9c2e722acf 100644
--- a/docs-site/src/examples/strictParsing.js
+++ b/docs-site/src/examples/strictParsing.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       strictParsing
     />
   );
diff --git a/docs-site/src/examples/tabIndex.js b/docs-site/src/examples/tabIndex.js
index f102c8133d..f153868217 100644
--- a/docs-site/src/examples/tabIndex.js
+++ b/docs-site/src/examples/tabIndex.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       tabIndex={1}
     />
   );
diff --git a/docs-site/src/examples/timeInput.js b/docs-site/src/examples/timeInput.js
index 8059d7bd3a..7bbf4385eb 100644
--- a/docs-site/src/examples/timeInput.js
+++ b/docs-site/src/examples/timeInput.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput
diff --git a/docs-site/src/examples/today.js b/docs-site/src/examples/today.js
index 2fbd13d77b..7b2eab2f21 100644
--- a/docs-site/src/examples/today.js
+++ b/docs-site/src/examples/today.js
@@ -1,10 +1,10 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
       todayButton="Vandaag"
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
     />
   );
 };
diff --git a/docs-site/src/examples/weekNumbers.js b/docs-site/src/examples/weekNumbers.js
index 83f1378a17..ef66a98143 100644
--- a/docs-site/src/examples/weekNumbers.js
+++ b/docs-site/src/examples/weekNumbers.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       locale="en-GB"
       showWeekNumbers
     />
diff --git a/docs-site/src/examples/weekPicker.js b/docs-site/src/examples/weekPicker.js
index d4fc21c649..d632c1f5b6 100644
--- a/docs-site/src/examples/weekPicker.js
+++ b/docs-site/src/examples/weekPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+  const [selectedDate, setSelectedDate] = useState(new Date("2021/02/22"));
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       dateFormat="I/R"
       locale="en-GB"
       showWeekNumbers
diff --git a/docs-site/src/examples/withPortalById.js b/docs-site/src/examples/withPortalById.js
index d7d6680b54..512e332a62 100644
--- a/docs-site/src/examples/withPortalById.js
+++ b/docs-site/src/examples/withPortalById.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       withPortal
       portalId="root-portal"
     />
diff --git a/docs-site/src/examples/yearDropdown.js b/docs-site/src/examples/yearDropdown.js
index 5c629b4caa..8d6a6b4718 100644
--- a/docs-site/src/examples/yearDropdown.js
+++ b/docs-site/src/examples/yearDropdown.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showYearDropdown
       dateFormatCalendar="MMMM"
       yearDropdownItemNumber={15}
diff --git a/docs-site/src/examples/yearItemNumber.js b/docs-site/src/examples/yearItemNumber.js
index 86052f5916..0d30176e34 100644
--- a/docs-site/src/examples/yearItemNumber.js
+++ b/docs-site/src/examples/yearItemNumber.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showYearPicker
       dateFormat="yyyy"
       yearItemNumber={9}
diff --git a/docs-site/src/examples/yearPicker.js b/docs-site/src/examples/yearPicker.js
index a0acb9534b..021fc12291 100644
--- a/docs-site/src/examples/yearPicker.js
+++ b/docs-site/src/examples/yearPicker.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       showYearPicker
       dateFormat="yyyy"
     />
diff --git a/docs-site/src/examples/yearSelectDropdown.js b/docs-site/src/examples/yearSelectDropdown.js
index f7e97fa1d6..4da9aa7b44 100644
--- a/docs-site/src/examples/yearSelectDropdown.js
+++ b/docs-site/src/examples/yearSelectDropdown.js
@@ -1,9 +1,9 @@
 () => {
-  const [startDate, setStartDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date) => setSelectedDate(date)}
       peekNextMonth
       showMonthDropdown
       showYearDropdown
diff --git a/examples/hello-world/src/App.js b/examples/hello-world/src/App.js
index a1e42c1c7d..94d1b2cc4e 100644
--- a/examples/hello-world/src/App.js
+++ b/examples/hello-world/src/App.js
@@ -5,17 +5,17 @@ import "react-datepicker/dist/react-datepicker.css";
 
 class App extends Component {
   state = {
-    startDate: new Date(),
+    selectedDate: new Date(),
   };
 
   render() {
-    const { startDate } = this.state;
-    return <DatePicker selected={startDate} onChange={this.handleChange} />;
+    const { selectedDate } = this.state;
+    return <DatePicker selected={selectedDate} onChange={this.handleChange} />;
   }
 
-  handleChange = (startDate) => {
+  handleChange = (selectedDate) => {
     this.setState({
-      startDate,
+      selectedDate,
     });
   };
 }