diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -37,13 +37,13 @@
   );
 
   const openFriendList = React.useCallback(
-    () => pushModal(<FriendListModal onClose={popModal} />),
-    [popModal, pushModal],
+    () => pushModal(<FriendListModal />),
+    [pushModal],
   );
 
   const openBlockList = React.useCallback(
-    () => pushModal(<BlockListModal onClose={popModal} />),
-    [popModal, pushModal],
+    () => pushModal(<BlockListModal />),
+    [pushModal],
   );
 
   const isAccountWithPassword = useSelector(state =>
diff --git a/web/settings/relationship/add-friends-modal.react.js b/web/settings/relationship/add-friends-modal.react.js
--- a/web/settings/relationship/add-friends-modal.react.js
+++ b/web/settings/relationship/add-friends-modal.react.js
@@ -17,16 +17,9 @@
   userRelationshipStatus.REQUEST_RECEIVED,
 ]);
 
-type Props = {
-  +onClose: () => void,
-};
-
-function AddFriendsModal(props: Props): React.Node {
-  const { onClose } = props;
-
+function AddFriendsModal(): React.Node {
   return (
     <AddUsersListModal
-      closeModal={onClose}
       name="Add Friends"
       excludedStatuses={excludedStatuses}
       confirmButtonContent="Send Friend Requests"
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -6,6 +6,7 @@
   updateRelationships,
   updateRelationshipsActionTypes,
 } from 'lib/actions/relationship-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type {
   UserRelationshipStatus,
@@ -27,7 +28,6 @@
 );
 
 type Props = {
-  +closeModal: () => void,
   +name: string,
   +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
   +confirmButtonContent: React.Node,
@@ -37,7 +37,6 @@
 
 function AddUsersListModal(props: Props): React.Node {
   const {
-    closeModal,
     name,
     excludedStatuses,
     confirmButtonContent,
@@ -45,6 +44,8 @@
     relationshipAction,
   } = props;
 
+  const { popModal } = useModalContext();
+
   const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
@@ -76,7 +77,7 @@
         action: relationshipAction,
         userIDs: Array.from(pendingUsersToAdd),
       });
-      closeModal();
+      popModal();
       return result;
     } catch (e) {
       setErrorMessage('unknown error');
@@ -84,9 +85,9 @@
     }
   }, [
     callUpdateRelationships,
+    popModal,
     relationshipAction,
     pendingUsersToAdd,
-    closeModal,
   ]);
 
   const confirmSelection = React.useCallback(
@@ -133,7 +134,7 @@
   return (
     <SearchModal
       name={name}
-      onClose={closeModal}
+      onClose={popModal}
       size="large"
       searchPlaceholder="Search by name"
       primaryButton={primaryButton}
diff --git a/web/settings/relationship/block-list-modal.react.js b/web/settings/relationship/block-list-modal.react.js
--- a/web/settings/relationship/block-list-modal.react.js
+++ b/web/settings/relationship/block-list-modal.react.js
@@ -21,21 +21,14 @@
   return user1.username.localeCompare(user2.username);
 }
 
-type Props = {
-  +onClose: () => void,
-};
-
-function BlockListModal(props: Props): React.Node {
-  const { onClose } = props;
-
+function BlockListModal(): React.Node {
   const { pushModal } = useModalContext();
   const openBlockUsersModal = React.useCallback(() => {
-    pushModal(<BlockUsersModal onClose={onClose} />);
-  }, [onClose, pushModal]);
+    pushModal(<BlockUsersModal />);
+  }, [pushModal]);
 
   return (
     <UserListModal
-      onClose={onClose}
       name="Block List"
       userRowComponent={BlockListRow}
       filterUser={filterUser}
diff --git a/web/settings/relationship/block-list-panel.react.js b/web/settings/relationship/block-list-panel.react.js
--- a/web/settings/relationship/block-list-panel.react.js
+++ b/web/settings/relationship/block-list-panel.react.js
@@ -30,11 +30,11 @@
 function BlockListPanel(): React.Node {
   const [searchText, setSearchText] = React.useState('');
 
-  const { pushModal, popModal } = useModalContext();
+  const { pushModal } = useModalContext();
 
   const onClickAddBlockedUsersButton = React.useCallback(
-    () => pushModal(<BlockUsersModal onClose={popModal} />),
-    [popModal, pushModal],
+    () => pushModal(<BlockUsersModal />),
+    [pushModal],
   );
 
   const blockList = React.useMemo(
diff --git a/web/settings/relationship/block-users-modal.react.js b/web/settings/relationship/block-users-modal.react.js
--- a/web/settings/relationship/block-users-modal.react.js
+++ b/web/settings/relationship/block-users-modal.react.js
@@ -17,13 +17,7 @@
   userRelationshipStatus.BLOCKED_BY_VIEWER,
 ]);
 
-type Props = {
-  +onClose: () => void,
-};
-
-function BlockUsersModal(props: Props): React.Node {
-  const { onClose } = props;
-
+function BlockUsersModal(): React.Node {
   const buttonContent = (
     <div>
       <FontAwesomeIcon icon={faUserShield} />
@@ -33,7 +27,6 @@
 
   return (
     <AddUsersListModal
-      closeModal={onClose}
       name="Block Users"
       excludedStatuses={excludedStatuses}
       confirmButtonContent={buttonContent}
diff --git a/web/settings/relationship/friend-list-modal.react.js b/web/settings/relationship/friend-list-modal.react.js
--- a/web/settings/relationship/friend-list-modal.react.js
+++ b/web/settings/relationship/friend-list-modal.react.js
@@ -30,21 +30,15 @@
   );
 }
 
-type Props = {
-  +onClose: () => void,
-};
-
-function FriendListModal(props: Props): React.Node {
-  const { onClose } = props;
-
+function FriendListModal(): React.Node {
   const { pushModal } = useModalContext();
+
   const openNewFriendsModal = React.useCallback(() => {
-    pushModal(<AddFriendsModal onClose={onClose} />);
-  }, [onClose, pushModal]);
+    pushModal(<AddFriendsModal />);
+  }, [pushModal]);
 
   return (
     <UserListModal
-      onClose={onClose}
       name="Friend List"
       userRowComponent={FriendListRow}
       filterUser={filterUser}
diff --git a/web/settings/relationship/friend-list-panel.react.js b/web/settings/relationship/friend-list-panel.react.js
--- a/web/settings/relationship/friend-list-panel.react.js
+++ b/web/settings/relationship/friend-list-panel.react.js
@@ -37,11 +37,11 @@
 function FriendListPanel(): React.Node {
   const [searchText, setSearchText] = React.useState('');
 
-  const { pushModal, popModal } = useModalContext();
+  const { pushModal } = useModalContext();
 
   const onClickAddFriendsButton = React.useCallback(
-    () => pushModal(<AddFriendsModal onClose={popModal} />),
-    [popModal, pushModal],
+    () => pushModal(<AddFriendsModal />),
+    [pushModal],
   );
 
   const friendList = React.useMemo(
diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 
 import css from './user-list.css';
@@ -10,7 +11,6 @@
 import SearchModal from '../../modals/search-modal.react.js';
 
 type Props = {
-  +onClose: () => void,
   +name: string,
   +userRowComponent: React.ComponentType<UserRowProps>,
   +filterUser: (userInfo: UserInfo) => boolean,
@@ -21,7 +21,6 @@
 
 function UserListModal(props: Props): React.Node {
   const {
-    onClose,
     name,
     userRowComponent,
     filterUser,
@@ -30,6 +29,8 @@
     onAddUsersClick,
   } = props;
 
+  const { popModal } = useModalContext();
+
   const searchModalChildGenerator = React.useCallback(
     (searchText: string) => (
       <div className={css.searchModalContent}>
@@ -58,7 +59,7 @@
       name={name}
       size="large"
       searchPlaceholder="Search by name"
-      onClose={onClose}
+      onClose={popModal}
     >
       {searchModalChildGenerator}
     </SearchModal>