diff --git a/examples/CustomDayButton.tsx b/examples/CustomDayButton.tsx
index 3ee83439f..6c2af5857 100644
--- a/examples/CustomDayButton.tsx
+++ b/examples/CustomDayButton.tsx
@@ -1,27 +1,39 @@
 import React from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayButtonProps, DayPicker } from "react-day-picker";
+
+const SelectedDateContext = React.createContext<{
+  selected?: Date;
+  setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
+}>({});
+
+function DayButton(props: DayButtonProps) {
+  const { day, modifiers, ...buttonProps } = props;
+
+  const { setSelected } = React.use(SelectedDateContext);
+  return (
+    <button
+      {...buttonProps}
+      onClick={() => setSelected?.(undefined)}
+      onDoubleClick={() => setSelected?.(day.date)}
+    />
+  );
+}
 
 export function CustomDayButton() {
   const [selected, setSelected] = React.useState<Date>();
+
   return (
-    <DayPicker
-      mode="single"
-      onSelect={setSelected}
-      selected={selected}
-      components={{
-        DayButton: (props) => {
-          const { day, modifiers, ...buttonProps } = props;
-          return (
-            <button
-              {...buttonProps}
-              onDoubleClick={() => setSelected(day.date)}
-              onClick={() => setSelected(undefined)}
-            />
-          );
-        }
-      }}
-      footer={selected?.toDateString() || "Double click to select a date"}
-    />
+    <SelectedDateContext.Provider value={{ selected, setSelected }}>
+      <DayPicker
+        mode="single"
+        selected={selected}
+        onSelect={setSelected}
+        components={{
+          DayButton
+        }}
+        footer={selected?.toDateString() || "Double click to select a date"}
+      />
+    </SelectedDateContext.Provider>
   );
 }
diff --git a/website/docs/docs/styling.mdx b/website/docs/docs/styling.mdx
index e04bb9022..4452719fc 100644
--- a/website/docs/docs/styling.mdx
+++ b/website/docs/docs/styling.mdx
@@ -332,7 +332,7 @@ If you are including [Tailwind CSS](https://tailwindcss.com) in your project, us
 
 - Add the class names you want to override to the `classNames` prop.
 - Extend the default class names with [`getDefaultClassNames`](../api/functions/getDefaultClassNames.md).
-- Read the [`style.css`](https://github.com/gpbl/react-day-picker/blob/main/style.css) file from the source and get familiar with the [UI elements](../docs/anatomy.mdx).
+- Read the [`style.css`](https://github.com/gpbl/react-day-picker/blob/main/src/style.css) file from the source and get familiar with the [UI elements](../docs/anatomy.mdx).
 - Adopt [custom components](../guides/custom-components.mdx) to further customize the HTML elements.
 
 ```tsx
diff --git a/website/docs/guides/custom-components.mdx b/website/docs/guides/custom-components.mdx
index c0eed25d2..3863acd4c 100644
--- a/website/docs/guides/custom-components.mdx
+++ b/website/docs/guides/custom-components.mdx
@@ -33,8 +33,8 @@ Pass the components to customize to the `components` prop. See the [list of cust
 ```tsx
 <DayPicker
   components={{
-    Day: (props: DayProps) => <CustomDaycell {...props} />,
-    MonthGrid: (props: MonthGridProps) => <CustomMonthGrid {...props} />
+    Day: CustomDaycell,
+    MonthGrid: CustomMonthGrid
     // etc
   }}
 />
@@ -79,33 +79,43 @@ For example, you can use a custom [DayButton](../api/functions/DayButton.md) to
 ```tsx title="./MyDatePicker.tsx"
 import React from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayButtonProps, DayPicker } from "react-day-picker";
 
-export function MyDatePicker() {
-  const [selected, setSelected] = React.useState<Date>();
+const SelectedDateContext = React.createContext<{
+  selected?: Date;
+  setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
+}>({});
+
+function DayButton(props: DayButtonProps) {
+  const { day, modifiers, ...buttonProps } = props;
+
+  const { setSelected } = React.use(SelectedDateContext);
   return (
-    <DayPicker
-      mode="single"
-      onSelect={setSelected}
-      selected={selected}
-      components={{
-        DayButton: (props) => {
-          const { day, modifiers, ...buttonProps } = props;
-          return (
-            <button
-              {...buttonProps}
-              // Prevent the default click event
-              onClick={() => setSelected(undefined)}
-              // Handle the double click event and reset the selection
-              onDoubleClick={() => setSelected(day.date)}
-            />
-          );
-        }
-      }}
-      footer={selected?.toDateString() || "Double click to select a date"}
+    <button
+      {...buttonProps}
+      onClick={() => setSelected?.(undefined)}
+      onDoubleClick={() => setSelected?.(day.date)}
     />
   );
 }
+
+export function CustomDayButton() {
+  const [selected, setSelected] = React.useState<Date>();
+
+  return (
+    <SelectedDateContext.Provider value={{ selected, setSelected }}>
+      <DayPicker
+        mode="single"
+        selected={selected}
+        onSelect={setSelected}
+        components={{
+          DayButton
+        }}
+        footer={selected?.toDateString() || "Double click to select a date"}
+      />
+    </SelectedDateContext.Provider>
+  );
+}
 ```
 
 <BrowserWindow>