diff --git a/package.json b/package.json
index 17ec958930..2e20adfb43 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "@babel/preset-typescript": "^7.12.1",
     "@babel/register": "^7.11.5",
     "@date-io/date-fns": "^2.10.6",
-    "@faceless-ui/modal": "^2.0.0-alpha.4",
+    "@faceless-ui/modal": "^2.0.1",
     "@faceless-ui/scroll-info": "^1.2.3",
     "@faceless-ui/window-info": "^2.0.2",
     "@types/is-plain-object": "^2.0.4",
diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
index 9c146c7462..80f2333748 100644
--- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
@@ -16,7 +16,7 @@ const baseClass = 'relationship-add-new';
 
 export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => {
   const relatedCollections = useRelatedCollections(relationTo);
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const { permissions } = useAuth();
   const [hasPermission, setHasPermission] = useState(false);
   const [modalCollection, setModalCollection] = useState<SanitizedCollectionConfig>();
@@ -71,10 +71,10 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
   }, [permissions, relatedCollections]);
 
   useEffect(() => {
-    if (!modalState[modalSlug]?.isOpen) {
+    if (!isModalOpen(modalSlug)) {
       setModalCollection(undefined);
     }
-  }, [modalState, modalSlug]);
+  }, [isModalOpen, modalSlug]);
 
   return hasPermission ? (
     <div
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
index 1f4e543b5c..8dd2c114aa 100644
--- a/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/upload/Button/index.tsx
@@ -42,7 +42,7 @@ const insertUpload = (editor, { value, relationTo }) => {
 };
 
 const UploadButton: React.FC<{ path: string }> = ({ path }) => {
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const editor = useSlate();
   const { serverURL, routes: { api }, collections } = useConfig();
   const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
@@ -65,7 +65,7 @@ const UploadButton: React.FC<{ path: string }> = ({ path }) => {
 
   const modalSlug = `${path}-add-upload`;
   const moreThanOneAvailableCollection = availableCollections.length > 1;
-  const isOpen = modalState[modalSlug]?.isOpen;
+  const isOpen = isModalOpen(modalSlug);
 
   // If modal is open, get active page of upload gallery
   const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;
diff --git a/src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx b/src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx
index 0269144727..ff7b4ce95a 100644
--- a/src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx
+++ b/src/admin/components/forms/field-types/Upload/SelectExisting/index.tsx
@@ -44,7 +44,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
   const { id } = useDocumentInfo();
   const { user } = useAuth();
   const { getData, getSiblingData } = useForm();
-  const { toggleModal, modalState } = useModal();
+  const { toggleModal, isModalOpen } = useModal();
   const [fields] = useState(() => formatFields(collection));
   const [limit, setLimit] = useState(defaultLimit);
   const [sort, setSort] = useState(null);
@@ -56,7 +56,7 @@ const SelectExistingUploadModal: React.FC<Props> = (props) => {
     baseClass,
   ].filter(Boolean).join(' ');
 
-  const isOpen = modalState[modalSlug]?.isOpen;
+  const isOpen = isModalOpen(modalSlug);
 
   const apiURL = isOpen ? `${serverURL}${api}/${collectionSlug}` : null;
 
diff --git a/src/admin/index.tsx b/src/admin/index.tsx
index f5721aaf26..a8fee8c904 100644
--- a/src/admin/index.tsx
+++ b/src/admin/index.tsx
@@ -34,7 +34,7 @@ const Index = () => (
           <Router>
             <ModalProvider
               classPrefix="payload"
-              zIndex={'var(--z-modal)' as unknown as number}
+              zIndex="var(--z-modal)"
               transTime={0}
             >
               <AuthProvider>
diff --git a/yarn.lock b/yarn.lock
index b3d48528ec..6db64d35f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1262,10 +1262,10 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@faceless-ui/modal@^2.0.0-alpha.4":
-  version "2.0.0-alpha.4"
-  resolved "https://registry.yarnpkg.com/@faceless-ui/modal/-/modal-2.0.0-alpha.4.tgz#f47c373433f186dc4b7e85c3e310562db3420eaa"
-  integrity sha512-v2b+vPhswX7ZBVQXdziUr89qst2ZdshLDQE8No/9LeGnQAo1TmNw1zPDuCBXF6Xi0gmHO6yUyfMFwFzUPcZl3Q==
+"@faceless-ui/modal@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@faceless-ui/modal/-/modal-2.0.1.tgz#8a47299442eff450c09432cfaef35c5471becad6"
+  integrity sha512-z1PaaLxwuX+1In4vhUxODZndGKdCY+WIqzvtnas3CaYGGCVJBSJ4jfv9UEEGZzcahmSy+71bEL89cUT6d36j1Q==
   dependencies:
     body-scroll-lock "^3.1.5"
     focus-trap "^6.9.2"