refactor: rename state variables in date picker examples for clarity

- Updated state variable names from `startDate` and `setStartDate` to `selectedDate` and `setSelectedDate` across multiple date picker examples.
- This change enhances code readability and consistency in the examples.
- Clone of the commit 5aa5985

Author: balajis-qb

docs-site/src/examples/ts/calendarContainer.tsx

@@ -1,5 +1,5 @@
 const CustomCalendarContainer = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const MyContainer = ({
     className,
@@ -22,8 +22,8 @@ const CustomCalendarContainer = () => {
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       calendarContainer={MyContainer}
     />
   );

docs-site/src/examples/ts/calendarIcon.tsx

@@ -1,11 +1,11 @@
 const CalendarIcon = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/ts/calendarIconExternal.tsx

@@ -1,11 +1,11 @@
 const CalendarIconExternal = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       icon="fa fa-calendar"
     />
   );

docs-site/src/examples/ts/calendarIconSvgIcon.tsx

@@ -1,11 +1,11 @@
 const CalendarIconSvgIcon = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       showIcon
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"

docs-site/src/examples/ts/calendarStartDay.tsx

@@ -1,10 +1,10 @@
 const CalendarStartDay = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       calendarStartDay={3}
     />
   );

docs-site/src/examples/ts/children.tsx

@@ -1,10 +1,10 @@
 const Children = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     >
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>

docs-site/src/examples/ts/clearInput.tsx

@@ -1,10 +1,10 @@
 const ClearInput = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       isClearable
       placeholderText="I have been cleared!"
     />

docs-site/src/examples/ts/closeOnScroll.tsx

@@ -1,11 +1,11 @@
 const CloseOnScroll = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       closeOnScroll
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/ts/closeOnScrollCallback.tsx

@@ -1,11 +1,11 @@
 const CloseOnScrollCallback = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
       closeOnScroll={(e: Event): boolean => e.target === document}
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
     />
   );
 };

docs-site/src/examples/ts/configureFloatingUI.tsx

@@ -1,10 +1,10 @@
 const ConfigureFloatingUI = () => {
-  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
     <DatePicker
-      selected={startDate}
-      onChange={(date: Date | null) => setStartDate(date)}
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[