diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 475f355c6a10..75c284fb9546 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -261,6 +261,9 @@ const ONYXKEYS = {
         REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
+
+        // Holds temporary transactions used during the creation and edit flow
+        TRANSACTION_DRAFT: 'transactionsDraft_',
         SPLIT_TRANSACTION_DRAFT: 'splitTransactionDraft_',
         PRIVATE_NOTES_DRAFT: 'privateNotesDraft_',
         NEXT_STEP: 'reportNextStep_',
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 6347f45549c7..6fb7c1f1ad5c 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -794,10 +794,10 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
     });
 
     if (_.has(transactionChanges, 'waypoints')) {
-        // Delete the backup transaction when editing waypoints when the server responds successfully and there are no errors
+        // Delete the draft transaction when editing waypoints when the server responds successfully and there are no errors
         successData.push({
             onyxMethod: Onyx.METHOD.SET,
-            key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`,
             value: null,
         });
     }
diff --git a/src/libs/actions/TransactionEdit.js b/src/libs/actions/TransactionEdit.js
index 78a271f0f8cd..2cb79ac387bd 100644
--- a/src/libs/actions/TransactionEdit.js
+++ b/src/libs/actions/TransactionEdit.js
@@ -11,7 +11,7 @@ function createBackupTransaction(transaction) {
         ...transaction,
     };
     // Use set so that it will always fully overwrite any backup transaction that could have existed before
-    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transaction.transactionID}-backup`, newTransaction);
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction.transactionID}`, newTransaction);
 }
 
 /**
@@ -19,12 +19,12 @@ function createBackupTransaction(transaction) {
  * @param {String} transactionID
  */
 function removeBackupTransaction(transactionID) {
-    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`, null);
+    Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`, null);
 }
 
 function restoreOriginalTransactionFromBackup(transactionID) {
     const connectionID = Onyx.connect({
-        key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}-backup`,
+        key: `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`,
         callback: (backupTransaction) => {
             Onyx.disconnect(connectionID);
 
diff --git a/src/libs/migrateOnyx.js b/src/libs/migrateOnyx.js
index b65670819418..5daba3686208 100644
--- a/src/libs/migrateOnyx.js
+++ b/src/libs/migrateOnyx.js
@@ -3,6 +3,7 @@ import Log from './Log';
 import KeyReportActionsDraftByReportActionID from './migrations/KeyReportActionsDraftByReportActionID';
 import PersonalDetailsByAccountID from './migrations/PersonalDetailsByAccountID';
 import RenameReceiptFilename from './migrations/RenameReceiptFilename';
+import TransactionBackupsToCollection from './migrations/TransactionBackupsToCollection';
 
 export default function () {
     const startTime = Date.now();
@@ -10,7 +11,7 @@ export default function () {
 
     return new Promise((resolve) => {
         // Add all migrations to an array so they are executed in order
-        const migrationPromises = [PersonalDetailsByAccountID, RenameReceiptFilename, KeyReportActionsDraftByReportActionID];
+        const migrationPromises = [PersonalDetailsByAccountID, RenameReceiptFilename, KeyReportActionsDraftByReportActionID, TransactionBackupsToCollection];
 
         // Reduce all promises down to a single promise. All promises run in a linear fashion, waiting for the
         // previous promise to finish before moving onto the next one.
diff --git a/src/libs/migrations/TransactionBackupsToCollection.ts b/src/libs/migrations/TransactionBackupsToCollection.ts
new file mode 100644
index 000000000000..ddaa691b8d47
--- /dev/null
+++ b/src/libs/migrations/TransactionBackupsToCollection.ts
@@ -0,0 +1,58 @@
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import Log from '@libs/Log';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Transaction} from '@src/types/onyx';
+
+/**
+ * This migration moves all the transaction backups stored in the transaction collection, ONYXKEYS.COLLECTION.TRANSACTION, to a reserved collection that only
+ * stores draft transactions, ONYXKEYS.COLLECTION.TRANSACTION_DRAFT. The purpose of the migration is that there is a possibility that transaction backups are
+ * not filtered by most functions, e.g, getAllReportTransactions (src/libs/TransactionUtils.ts). One problem that arose from storing transaction backups with
+ * the other transactions is that for every distance request which have their waypoints updated offline, we expect the ReportPreview component to display the
+ * default image of a pending map. However, due to the presence of the transaction backup, the previous map image will be displayed alongside the pending map.
+ * The problem was further discussed in this PR. https://github.com/Expensify/App/pull/30232#issuecomment-178110172
+ */
+export default function (): Promise<void> {
+    return new Promise<void>((resolve) => {
+        const connectionID = Onyx.connect({
+            key: ONYXKEYS.COLLECTION.TRANSACTION,
+            waitForCollectionCallback: true,
+            callback: (transactions: OnyxCollection<Transaction>) => {
+                Onyx.disconnect(connectionID);
+
+                // Determine whether any transactions were stored
+                if (!transactions || Object.keys(transactions).length === 0) {
+                    Log.info('[Migrate Onyx] Skipped TransactionBackupsToCollection migration because there are no transactions');
+                    return resolve();
+                }
+
+                const onyxData: OnyxCollection<Transaction> = {};
+
+                // Find all the transaction backups available
+                Object.keys(transactions).forEach((transactionOnyxKey: string) => {
+                    const transaction: Transaction | null = transactions[transactionOnyxKey];
+
+                    // Determine whether or not the transaction is a backup
+                    if (transactionOnyxKey.endsWith('-backup') && transaction) {
+                        // Create the transaction backup in the draft transaction collection
+                        onyxData[`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transaction.transactionID}`] = transaction;
+
+                        // Delete the transaction backup stored in the transaction collection
+                        onyxData[transactionOnyxKey] = null;
+                    }
+                });
+
+                // Determine whether any transaction backups are found
+                if (Object.keys(onyxData).length === 0) {
+                    Log.info('[Migrate Onyx] Skipped TransactionBackupsToCollection migration because there are no transaction backups');
+                    return resolve();
+                }
+
+                // Move the transaction backups to the draft transaction collection
+                Onyx.multiSet(onyxData as Partial<{string: [Transaction | null]}>).then(() => {
+                    Log.info('[Migrate Onyx] TransactionBackupsToCollection migration: Successfully moved all the transaction backups to the draft transaction collection');
+                    resolve();
+                });
+            },
+        });
+    });
+}
diff --git a/src/pages/EditRequestDistancePage.js b/src/pages/EditRequestDistancePage.js
index 375d56935135..48b80890dc49 100644
--- a/src/pages/EditRequestDistancePage.js
+++ b/src/pages/EditRequestDistancePage.js
@@ -140,6 +140,6 @@ export default withOnyx({
         key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}`,
     },
     transactionBackup: {
-        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION}${props.transactionID}-backup`,
+        key: (props) => `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${props.transactionID}`,
     },
 })(EditRequestDistancePage);
