diff --git a/example/index.tsx b/example/index.tsx
index 8a4237e..5310f4a 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -1,5 +1,5 @@
 import 'react-app-polyfill/ie11';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import {
   Box,
@@ -12,6 +12,13 @@ import {
   Heading,
   HStack,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   StackDivider,
   Switch,
   Tab,
@@ -22,6 +29,7 @@ import {
   Text,
   ThemeConfig,
   useColorMode,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import {
@@ -51,6 +59,8 @@ const App = () => {
   const [firstDayOfWeek, setFirstDayOfWeek] = useState<FirstDayOfWeek>(1);
   const [isSingleChecked, setSingleCheck] = useState(true);
   const [isRangeChecked, setRangeCheck] = useState(true);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const modalRef = useRef(null);
 
   return (
     <VStack
@@ -137,102 +147,148 @@ const App = () => {
         <TabPanels height={'20rem'}>
           <TabPanel>
             <Panel>
-              <Section title="Single:">
-                <Flex alignItems={'center'} gap={2}>
-                  <Box marginRight={'1rem'}>closeOnSelect:</Box>
-                  <Switch
-                    isChecked={isSingleChecked}
-                    onChange={(e) => setSingleCheck(e.currentTarget.checked)}
-                  />
-                  <Button
-                    size={'sm'}
-                    onClick={() => {
-                      setDate(undefined);
-                    }}
-                  >
-                    Set Empty (undefined)
-                  </Button>
-                </Flex>
-                {/* chakra ui add prefix for the trigger for some reasons? */}
-                <Flex style={{ gap: '1rem' }} alignItems="center">
-                  <label htmlFor={`popover-trigger-default`}>Default:</label>
-                  <SingleDatepicker
-                    id="default"
-                    date={date}
-                    disabledDates={
-                      new Set([
-                        startOfDay(subDays(demoDate, 6)).getTime(),
-                        startOfDay(subDays(demoDate, 4)).getTime(),
-                        startOfDay(subDays(demoDate, 2)).getTime(),
-                      ])
-                    }
-                    propsConfigs={{}}
-                    minDate={subDays(demoDate, 8)}
-                    maxDate={addDays(demoDate, 8)}
-                    onDateChange={setDate}
-                    closeOnSelect={isSingleChecked}
-                  />
-                </Flex>
-                <Flex style={{ gap: '1rem' }} alignItems="center">
-                  <label htmlFor={`popover-trigger-input`}>Input:</label>
-                  <SingleDatepicker
-                    id="input"
-                    triggerVariant="input"
-                    date={date}
-                    disabledDates={
-                      new Set([
-                        startOfDay(subDays(demoDate, 6)).getTime(),
-                        startOfDay(subDays(demoDate, 4)).getTime(),
-                        startOfDay(subDays(demoDate, 2)).getTime(),
-                      ])
-                    }
-                    minDate={subDays(demoDate, 8)}
-                    maxDate={addDays(demoDate, 8)}
-                    onDateChange={setDate}
-                    closeOnSelect={isSingleChecked}
-                  />
-                </Flex>
-              </Section>
-              <Section title="Range:">
-                <Flex alignItems={'center'} gap={2}>
-                  <Box marginRight={'1rem'}>closeOnSelect:</Box>
-                  <Switch
-                    isChecked={isRangeChecked}
-                    onChange={(e) => setRangeCheck(e.currentTarget.checked)}
-                  />
-                  <Button
-                    size={'sm'}
-                    onClick={() => {
-                      setSelectedDates([]);
-                    }}
-                  >
-                    Set Empty (Empty Array: "[]")
-                  </Button>
-                </Flex>
-                <Flex style={{ gap: '1rem' }} alignItems="center">
-                  <label htmlFor={`popover-trigger-default-range`}>
-                    Default:
-                  </label>
-                  <RangeDatepicker
-                    id="default-range"
-                    selectedDates={selectedDates}
-                    onDateChange={setSelectedDates}
-                    closeOnSelect={isRangeChecked}
-                  />
-                </Flex>
-                <Flex style={{ gap: '1rem' }} alignItems="center">
-                  <label htmlFor={`popover-trigger-input-range`}>
-                    Input:
-                  </label>
-                  <RangeDatepicker
-                    id="input-range"
-                    triggerVariant="input"
-                    selectedDates={selectedDates}
-                    onDateChange={setSelectedDates}
-                    closeOnSelect={isRangeChecked}
-                  />
-                </Flex>
-              </Section>
+              <Flex flexDir={'column'} gap={3} pb="5rem">
+                <Section title="Single:">
+                  <Flex alignItems={'center'} gap={2}>
+                    <Box marginRight={'1rem'}>closeOnSelect:</Box>
+                    <Switch
+                      isChecked={isSingleChecked}
+                      onChange={(e) => setSingleCheck(e.currentTarget.checked)}
+                    />
+                    <Button
+                      size={'sm'}
+                      onClick={() => {
+                        setDate(undefined);
+                      }}
+                    >
+                      Set Empty (undefined)
+                    </Button>
+                  </Flex>
+                  {/* chakra ui add prefix for the trigger for some reasons? */}
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-default`}>Default:</label>
+                    <SingleDatepicker
+                      id="default"
+                      date={date}
+                      disabledDates={
+                        new Set([
+                          startOfDay(subDays(demoDate, 6)).getTime(),
+                          startOfDay(subDays(demoDate, 4)).getTime(),
+                          startOfDay(subDays(demoDate, 2)).getTime(),
+                        ])
+                      }
+                      propsConfigs={{}}
+                      minDate={subDays(demoDate, 8)}
+                      maxDate={addDays(demoDate, 8)}
+                      onDateChange={setDate}
+                      closeOnSelect={isSingleChecked}
+                    />
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-input`}>Input:</label>
+                    <SingleDatepicker
+                      id="input"
+                      triggerVariant="input"
+                      date={date}
+                      disabledDates={
+                        new Set([
+                          startOfDay(subDays(demoDate, 6)).getTime(),
+                          startOfDay(subDays(demoDate, 4)).getTime(),
+                          startOfDay(subDays(demoDate, 2)).getTime(),
+                        ])
+                      }
+                      minDate={subDays(demoDate, 8)}
+                      maxDate={addDays(demoDate, 8)}
+                      onDateChange={setDate}
+                      closeOnSelect={isSingleChecked}
+                    />
+                  </Flex>
+                </Section>
+                <Section title="Range:">
+                  <Flex alignItems={'center'} gap={2}>
+                    <Box marginRight={'1rem'}>closeOnSelect:</Box>
+                    <Switch
+                      isChecked={isRangeChecked}
+                      onChange={(e) => setRangeCheck(e.currentTarget.checked)}
+                    />
+                    <Button
+                      size={'sm'}
+                      onClick={() => {
+                        setSelectedDates([]);
+                      }}
+                    >
+                      Set Empty (Empty Array: "[]")
+                    </Button>
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-default-range`}>
+                      Default:
+                    </label>
+                    <RangeDatepicker
+                      id="default-range"
+                      selectedDates={selectedDates}
+                      onDateChange={setSelectedDates}
+                      closeOnSelect={isRangeChecked}
+                    />
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-input-range`}>
+                      Input:
+                    </label>
+                    <RangeDatepicker
+                      id="input-range"
+                      triggerVariant="input"
+                      selectedDates={selectedDates}
+                      onDateChange={setSelectedDates}
+                      closeOnSelect={isRangeChecked}
+                    />
+                  </Flex>
+                </Section>
+                <Section title="Inside Modal:">
+                  <Button onClick={onOpen}>Open Modal</Button>
+                  <Modal isOpen={isOpen} onClose={onClose}>
+                    <ModalOverlay />
+                    <ModalContent ref={modalRef}>
+                      <ModalHeader>Modal Title</ModalHeader>
+                      <ModalCloseButton />
+                      <ModalBody>
+                        <Flex flexDir={'column'} gap={2}>
+                          <div>Default:</div>
+                          <SingleDatepicker
+                            date={date}
+                            onDateChange={setDate}
+                          />
+                          <RangeDatepicker
+                            selectedDates={selectedDates}
+                            onDateChange={setSelectedDates}
+                          />
+                          <div>
+                            if <code>{`usePortal={true}`} </code> <br />
+                            please add <code> {`portalRef={modalRef}`}</code>
+                          </div>
+                          <SingleDatepicker
+                            date={date}
+                            onDateChange={setDate}
+                            portalRef={modalRef}
+                          />
+                          <RangeDatepicker
+                            selectedDates={selectedDates}
+                            onDateChange={setSelectedDates}
+                            usePortal={true}
+                            portalRef={modalRef}
+                          />
+                        </Flex>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button colorScheme="blue" mr={3} onClick={onClose}>
+                          Close
+                        </Button>
+                        <Button variant="ghost">Secondary Action</Button>
+                      </ModalFooter>
+                    </ModalContent>
+                  </Modal>
+                </Section>
+              </Flex>
             </Panel>
           </TabPanel>
           <TabPanel>
@@ -498,6 +554,7 @@ const RangeCalendarDemo = () => {
 const Section: React.FC<React.PropsWithChildren<{ title?: string }>> = ({
   title,
   children,
+  sectionProps,
 }) => (
   <VStack spacing={3} alignItems="flex-start" padding={'0.25rem'}>
     <Heading size="md">{title}</Heading>
diff --git a/src/range.tsx b/src/range.tsx
index c6fb634..8142aec 100644
--- a/src/range.tsx
+++ b/src/range.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Props as DayzedHookProps } from 'dayzed';
 import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
 import {
@@ -96,6 +96,7 @@ interface RangeProps extends DatepickerProps {
   id?: string;
   name?: string;
   usePortal?: boolean;
+  portalRef?: React.MutableRefObject<null>;
 }
 
 export type RangeDatepickerProps = RangeProps & VariantProps;
@@ -122,6 +123,7 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
     id,
     name,
     usePortal,
+    portalRef,
     defaultIsOpen,
     closeOnSelect,
     selectedDates,
@@ -231,7 +233,7 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
                 }
               }}
               autoComplete="off"
-              width={'15rem'}
+              width={'16rem'}
               isDisabled={disabled}
               name={name}
               value={intVal}
@@ -258,7 +260,9 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
         </Flex>
       ) : null}
       {children ? children(selectedDates) : null}
-      <PopoverContentWrapper>
+      <PopoverContentWrapper
+        {...(usePortal ? { containerRef: portalRef } : {})}
+      >
         <PopoverContent
           width="100%"
           {...propsConfigs?.popoverCompProps?.popoverContentProps}
diff --git a/src/single.tsx b/src/single.tsx
index cd9f267..83fe6e2 100644
--- a/src/single.tsx
+++ b/src/single.tsx
@@ -41,6 +41,7 @@ interface SingleProps extends DatepickerProps {
   id?: string;
   name?: string;
   usePortal?: boolean;
+  portalRef?: React.MutableRefObject<null>;
 }
 
 export type VariantProps =
@@ -88,6 +89,7 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
     maxDate,
     configs,
     usePortal,
+    portalRef,
     disabledDates,
     defaultIsOpen,
     triggerVariant,
@@ -223,7 +225,9 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
         </Flex>
       ) : null}
       {children ? children(selectedDate) : null}
-      <PopoverContentWrapper>
+      <PopoverContentWrapper
+        {...(usePortal ? { containerRef: portalRef } : {})}
+      >
         <PopoverContent
           width="100%"
           {...propsConfigs?.popoverCompProps?.popoverContentProps}