diff --git a/src/components/SelectionList/hooks/useFlattenedSections.ts b/src/components/SelectionList/hooks/useFlattenedSections.ts
index 6ea493e2d92c..53fbc3ed231b 100644
--- a/src/components/SelectionList/hooks/useFlattenedSections.ts
+++ b/src/components/SelectionList/hooks/useFlattenedSections.ts
@@ -46,7 +46,9 @@ function useFlattenedSections<TItem extends ListItem>(sections: Array<Section<TI
         let itemsTotalCount = 0;
 
         for (const section of sections) {
-            if (section.title) {
+            const sectionDataLength = section.data?.length ?? 0;
+            itemsTotalCount += sectionDataLength;
+            if (section.title && sectionDataLength > 0) {
                 disabledIndices.push(data.length);
                 data.push({
                     type: CONST.SECTION_LIST_ITEM_TYPE.HEADER,
@@ -55,7 +57,6 @@ function useFlattenedSections<TItem extends ListItem>(sections: Array<Section<TI
                     isDisabled: true,
                 });
             }
-            itemsTotalCount += section.data?.length ?? 0;
 
             for (const item of section.data ?? []) {
                 const currentIndex = data.length;
diff --git a/src/pages/settings/Security/AddDelegate/AddDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/AddDelegatePage.tsx
index 727e69690c17..c48a659b2055 100644
--- a/src/pages/settings/Security/AddDelegate/AddDelegatePage.tsx
+++ b/src/pages/settings/Security/AddDelegate/AddDelegatePage.tsx
@@ -1,11 +1,10 @@
-import React, {useEffect, useMemo} from 'react';
+import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-// eslint-disable-next-line no-restricted-imports
-import SelectionList from '@components/SelectionListWithSections';
-import UserListItem from '@components/SelectionListWithSections/UserListItem';
+import UserListItem from '@components/SelectionList/ListItem/UserListItem';
+import SelectionList from '@components/SelectionList/SelectionListWithSections';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSearchSelector from '@hooks/useSearchSelector';
@@ -23,18 +22,15 @@ function AddDelegatePage() {
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true});
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: false});
-    const existingDelegates = useMemo(
-        () =>
-            account?.delegatedAccess?.delegates?.reduce(
-                (prev, {email}) => {
-                    // eslint-disable-next-line no-param-reassign
-                    prev[email] = true;
-                    return prev;
-                },
-                {} as Record<string, boolean>,
-            ) ?? {},
-        [account?.delegatedAccess?.delegates],
-    );
+    const existingDelegates =
+        account?.delegatedAccess?.delegates?.reduce(
+            (prev, {email}) => {
+                // eslint-disable-next-line no-param-reassign
+                prev[email] = true;
+                return prev;
+            },
+            {} as Record<string, boolean>,
+        ) ?? {};
 
     const {searchTerm, debouncedSearchTerm, setSearchTerm, availableOptions, areOptionsInitialized, toggleSelection} = useSearchSelector({
         selectionMode: CONST.SEARCH_SELECTOR.SELECTION_MODE_SINGLE,
@@ -48,51 +44,45 @@ function AddDelegatePage() {
         },
     });
 
-    const headerMessage = useMemo(() => {
-        return getHeaderMessage(
-            (availableOptions.recentReports?.length || 0) + (availableOptions.personalDetails?.length || 0) !== 0,
-            !!availableOptions.userToInvite,
-            debouncedSearchTerm,
-            countryCode,
-        );
-    }, [availableOptions.recentReports?.length, availableOptions.personalDetails?.length, availableOptions.userToInvite, debouncedSearchTerm, countryCode]);
-
-    const sections = useMemo(() => {
-        const sectionsList = [];
-
-        sectionsList.push({
+    const headerMessage = getHeaderMessage(
+        (availableOptions.recentReports?.length || 0) + (availableOptions.personalDetails?.length || 0) !== 0,
+        !!availableOptions.userToInvite,
+        debouncedSearchTerm,
+        countryCode,
+    );
+    const sectionsList = [
+        {
             title: translate('common.recents'),
+            sectionIndex: 0,
             data: availableOptions.recentReports,
-            shouldShow: availableOptions.recentReports?.length > 0,
-        });
-
-        sectionsList.push({
+        },
+        {
             title: translate('common.contacts'),
+            sectionIndex: 1,
             data: availableOptions.personalDetails,
-            shouldShow: availableOptions.personalDetails?.length > 0,
-        });
+        },
+    ];
 
-        if (availableOptions.userToInvite) {
-            sectionsList.push({
-                title: undefined,
-                data: [availableOptions.userToInvite],
-                shouldShow: true,
-            });
-        }
+    if (availableOptions.userToInvite) {
+        sectionsList.push({
+            sectionIndex: 2,
+            title: '',
+            data: [availableOptions.userToInvite],
+        });
+    }
 
-        return sectionsList.map((section) => ({
-            ...section,
-            data: section.data.map((option) => ({
-                ...option,
-                text: option.text ?? '',
-                alternateText: option.alternateText ?? undefined,
-                keyForList: option.keyForList ?? '',
-                isDisabled: option.isDisabled ?? undefined,
-                login: option.login ?? undefined,
-                shouldShowSubscript: option.shouldShowSubscript ?? undefined,
-            })),
-        }));
-    }, [availableOptions.recentReports, availableOptions.personalDetails, availableOptions.userToInvite, translate]);
+    const sections = sectionsList.map((section) => ({
+        ...section,
+        data: section.data.map((option, index) => ({
+            ...option,
+            text: option.text ?? '',
+            alternateText: option.alternateText ?? undefined,
+            keyForList: `${option.keyForList}-${index}`,
+            isDisabled: option.isDisabled ?? undefined,
+            login: option.login ?? undefined,
+            shouldShowSubscript: option.shouldShowSubscript ?? undefined,
+        })),
+    }));
 
     useEffect(() => {
         searchInServer(debouncedSearchTerm);
@@ -114,12 +104,16 @@ function AddDelegatePage() {
                         ListItem={UserListItem}
                         onSelectRow={toggleSelection}
                         shouldSingleExecuteRowSelect
-                        onChangeText={setSearchTerm}
-                        textInputValue={searchTerm}
-                        headerMessage={headerMessage}
-                        textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
+                        textInputOptions={{
+                            value: searchTerm,
+                            onChangeText: setSearchTerm,
+                            headerMessage,
+                            label: translate('selectionList.nameEmailOrPhoneNumber'),
+                        }}
                         showLoadingPlaceholder={!areOptionsInitialized}
                         isLoadingNewOptions={!!isSearchingForReports}
+                        disableMaintainingScrollPosition
+                        shouldShowTextInput
                     />
                 </View>
             </DelegateNoAccessWrapper>