diff --git a/src/components/Popover/index.js b/src/components/Popover/index.js
index fe04c4d69be6..f2c61b38c008 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.js
@@ -11,39 +11,40 @@ import PopoverWithoutOverlay from '../PopoverWithoutOverlay';
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
 function Popover(props) {
+    const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition} = props;
     // Not adding this inside the PopoverProvider
     // because this is an issue on smaller screens as well.
     React.useEffect(() => {
         const listener = () => {
-            if (!props.isVisible) {
+            if (!isVisible) {
                 return;
             }
 
-            props.onClose();
+            onClose();
         };
         window.addEventListener('popstate', listener);
         return () => {
             window.removeEventListener('popstate', listener);
         };
-    }, [props.onClose, props.isVisible]);
+    }, [onClose, isVisible]);
 
-    if (!props.fullscreen && !props.isSmallScreenWidth) {
+    if (!fullscreen && !isSmallScreenWidth) {
         return createPortal(
             <Modal
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 type={CONST.MODAL.MODAL_TYPE.POPOVER}
-                popoverAnchorPosition={props.anchorPosition}
-                animationInTiming={props.disableAnimation ? 1 : props.animationInTiming}
-                animationOutTiming={props.disableAnimation ? 1 : props.animationOutTiming}
+                popoverAnchorPosition={anchorPosition}
+                animationInTiming={disableAnimation ? 1 : animationInTiming}
+                animationOutTiming={disableAnimation ? 1 : animationOutTiming}
                 shouldCloseOnOutsideClick
-                onLayout={props.onLayout}
+                onLayout={onLayout}
             />,
             document.body,
         );
     }
 
-    if (props.withoutOverlay && !props.isSmallScreenWidth) {
+    if (withoutOverlay && !isSmallScreenWidth) {
         // eslint-disable-next-line react/jsx-props-no-spreading
         return createPortal(<PopoverWithoutOverlay {...props} />, document.body);
     }
@@ -52,12 +53,12 @@ function Popover(props) {
         <Modal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
-            popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
-            fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
-            animationInTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationInTiming}
-            animationOutTiming={props.disableAnimation && !props.isSmallScreenWidth ? 1 : props.animationOutTiming}
-            onLayout={props.onLayout}
+            type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+            popoverAnchorPosition={isSmallScreenWidth ? undefined : anchorPosition}
+            fullscreen={isSmallScreenWidth ? true : fullscreen}
+            animationInTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationInTiming}
+            animationOutTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationOutTiming}
+            onLayout={onLayout}
         />
     );
 }