diff --git a/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagEdit.tsx b/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagEdit.tsx
index 6aef64d34f..7ac48ce5d7 100644
--- a/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagEdit.tsx
+++ b/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagEdit.tsx
@@ -38,7 +38,7 @@ const ProfileFlagsEdit: React.FC<Props> = (props: Props) => {
   const { modalRef, profileId } = props;
 
   const { allProfileFlags, profileFlags, associateProfileFlag } = useProfileFlags(profileId);
-  const { loading } = useSelector((state: RootState) => selectProfileAsyncPropertiesById(state, profileId));
+  const loading = useSelector((state: RootState) => selectProfileAsyncPropertiesById(state, profileId))?.loading;
 
   const anchorRef = useRef(null);
 
diff --git a/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagList.tsx b/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagList.tsx
index 7746b6a6e3..04851b8447 100644
--- a/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagList.tsx
+++ b/plugin-hrm-form/src/components/profile/profileFlag/ProfileFlagList.tsx
@@ -41,7 +41,7 @@ type Props = OwnProps;
 
 const ProfileFlagsList: React.FC<Props> = ({ disassociateRef, enableDisassociate, profileId }) => {
   const { profileFlags, disassociateProfileFlag } = useProfileFlags(profileId);
-  const { loading } = useSelector((state: RootState) => selectProfileAsyncPropertiesById(state, profileId));
+  const loading = useSelector((state: RootState) => selectProfileAsyncPropertiesById(state, profileId))?.loading;
 
   const renderDisassociate = (flag: ProfileFlag) => {
     if (!enableDisassociate) return null;