fix: multiple alert modal selected index sync (MetaMask#23893)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Fixes a bug in `MultipleAlertModal` where closing the modal while
viewing one alert and reopening it by clicking a different alert would
cause a mismatch between the alert content and styling.

**Root cause:** The `selectedIndex` state (used for styling/severity)
was not syncing with the `alertKey` (used for content) when the modal
was reopened. This caused scenarios where a Warning alert's yellow
styling would display with a Danger alert's red content, or vice versa.

**Solution:** Added a `useEffect` that syncs `selectedIndex` with
`alertKey` whenever the alertKey changes, ensuring the correct styling
is always applied.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed a bug where alert modal styling would not update
correctly when switching between different severity alerts.

## **Related issues**

Fixes: MetaMask#23841

## **Manual testing steps**

```gherkin
Feature: Multiple alert modal styling synchronization

  Scenario: user closes and reopens alert modal with different alert
    Given the user is on a transaction confirmation screen with multiple alerts of different severities (e.g., a Warning alert on "Network fee" and a Danger alert on "You receive")

    When user clicks on the Warning alert to open the modal
    And user navigates to the Danger alert using the arrow
    And user closes the modal by tapping outside
    And user clicks on the Warning alert again
    Then the modal displays the Warning alert with correct yellow/warning styling

  Scenario: user switches between danger and warning alerts
    Given the user is on a transaction confirmation screen with a Danger alert and a Warning alert

    When user clicks on the Danger alert to open the modal
    And user closes the modal by tapping outside
    And user clicks on the Warning alert
    Then the modal displays the Warning alert with correct yellow/warning styling (not red/danger styling)## 
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/81a6f432-fc08-4f27-8bce-6287ce5e330c

### **After**

<!-- [screenshots/recordings] -->


https://github.com/user-attachments/assets/2afa4cfd-95ce-4d35-9886-fac5e6cfcf03



## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Syncs `selectedIndex` with `alertKey` in `MultipleAlertModal` to keep
styling/content aligned and adds a test for this behavior.
> 
> - **Confirmations UI**:
> - `multiple-alert-modal.tsx`: Add `useEffect` to sync `selectedIndex`
with `alertKey`, ensuring correct styling when switching/reopening
alerts.
>   - Update imports to include `useEffect`.
> - **Tests**:
> - `multiple-alert-modal.test.tsx`: Add test validating `selectedIndex`
updates when `alertKey` changes; minor setup adjustments.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
eacd2ad. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: imblue-dabadee

app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx

@@ -153,4 +153,27 @@ describe('MultipleAlertModal', () => {
     const { queryByText } = render(<MultipleAlertModal />);
     expect(queryByText('Test Alert')).toBeNull();
   });
+
+  it('syncs selectedIndex with alertKey when alertKey changes', () => {
+    const setAlertKey = jest.fn();
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
+      setAlertKey,
+      alertKey: 'alert2',
+    });
+
+    const { getByText, rerender } = render(<MultipleAlertModal />);
+
+    expect(getByText('Test Alert 2')).toBeOnTheScreen();
+
+    (useAlerts as jest.Mock).mockReturnValue({
+      ...baseMockUseAlerts,
+      setAlertKey,
+      alertKey: 'alert1',
+    });
+
+    rerender(<MultipleAlertModal />);
+
+    expect(getByText('Test Alert')).toBeOnTheScreen();
+  });
 });

app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useAlerts } from '../../../context/alert-system-context';
 import { Alert, AlertSeverity, Severity } from '../../../types/alerts';
@@ -140,6 +140,17 @@ const MultipleAlertModal: React.FC = () => {
     initialAlertIndex === -1 ? 0 : initialAlertIndex,
   );
 
+  // syncs selectedIndex with alertKey when the modal is reopened which
+  // ensures the correct styling is applied
+  useEffect(() => {
+    const alertKeyIndex = fieldAlerts.findIndex(
+      (alert: Alert) => alert.key === alertKey,
+    );
+    if (alertKeyIndex !== -1 && alertKeyIndex !== selectedIndex) {
+      setSelectedIndex(alertKeyIndex);
+    }
+  }, [alertKey, fieldAlerts, selectedIndex]);
+
   const handleBackButtonClick = useCallback(() => {
     setSelectedIndex((prevIndex: number) =>
       prevIndex > 0 ? prevIndex - 1 : prevIndex,