ok

src/App.js

@@ -67,6 +67,7 @@ function App() {
   const [onModalCloseFunction, setOnModalCloseFunction] = useState(null);
   const [onModalYesFunction, setOnModalYesFunction] = useState(null);
   const transactionList = useRef(null);
+  const [depth, setDepth] = useState(-1);
   const [queue, setQueue] = useState([]);
 
 
@@ -351,6 +352,13 @@ function App() {
     let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
     console.log(transaction_info);  // Log the updated transaction_info
 
+
+const depthh = transactionList.current.findIndex(
+  item => item.transactionId.toString() === transaction_info.toString()
+);
+
+setDepth(depthh);
+
     // If transaction_info is an empty string, set the modal
     if (transaction_info == '') return false;
     else return true;
@@ -411,15 +419,18 @@ function App() {
 
     // Find the current index based on the 'from' transactionId
     const currentIndex = transactionList.current.findIndex(item => item.transactionId == from);
-
+    
     // Determine the new transactionId based on the direction
     let newTransactionId;
     if (direction === 'next') {
+
       // If we're not at the last transaction, get the next transactionId
       newTransactionId = currentIndex < transactionList.current.length - 1
         ? transactionList.current[currentIndex + 1].transactionId
         : from; // If already at the end, stay on the current transactionId
     } else if (direction === 'previous') {
+
+    setDepth(currentIndex -1);
       // If we're not at the first transaction, get the previous transactionId
       newTransactionId = currentIndex > 0
         ? transactionList.current[currentIndex - 1].transactionId
@@ -741,6 +752,7 @@ function App() {
         isOpen={isModalOpen}
         modalContent={modalContent}
         handleMoveToTransaction={handleMoveToTransaction}
+        depth={depth}
         welcomePageConfig={shop.welcomePageConfig}
         onClose={closeModal}
         setModal={setModal}