diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
index b83787e6b..b2b66e6a7 100644
--- a/src/DayPicker.tsx
+++ b/src/DayPicker.tsx
@@ -206,7 +206,7 @@ export function DayPicker(props: DayPickerProps) {
     <dayPickerContext.Provider
       value={{ ...calendar, ...selection, ...modifiers }}
     >
-      <div
+      <components.Root
         className={[classNames[UI.Root], props.className]
           .filter(Boolean)
           .join(" ")}
@@ -584,7 +584,7 @@ export function DayPicker(props: DayPickerProps) {
             {props.footer}
           </components.Footer>
         )}
-      </div>
+      </components.Root>
     </dayPickerContext.Provider>
   );
 }