Store host info in state so the modal doesn't update after reloading managers

src/views/studio/modals/transfer-host-confirmation.jsx

@@ -27,10 +27,17 @@ const TransferHostConfirmation = ({
     hostId,
     selectedId
 }) => {
-    const currentHostUsername = items.find(item => item.id === hostId).username;
-    const currentHostImage = items.find(item => item.id === hostId).profile.images['90x90'];
-    const newHostUsername = items.find(item => item.id === selectedId).username;
-    const newHostImage = items.find(item => item.id === selectedId).profile.images['90x90'];
+    // Initialize host info so it does not get updated after we reload the manager list
+    const [hostInfo] = useState(() => {
+        const currentHostItem = items.find(item => item.id === hostId);
+        const newHostItem = items.find(item => item.id === selectedId);
+        return {
+            currentHostUsername: currentHostItem.username,
+            currentHostImage: currentHostItem.profile.images['90x90'],
+            newHostUsername: newHostItem.username,
+            newHostImage: newHostItem.profile.images['90x90']
+        };
+    });
     const [passwordInputValue, setPasswordInputValue] = useState('');
     const [submitting, setSubmitting] = useState(false);
     const [validationError, setValidationError] = useState(null);
@@ -46,13 +53,13 @@ const TransferHostConfirmation = ({
 
     const handleSubmit = () => {
         setSubmitting(true);
-        handleTransferHost(passwordInputValue, newHostUsername, selectedId)
+        handleTransferHost(passwordInputValue, hostInfo.newHostUsername, selectedId)
             .then(() => handleLoadManagers(true)) // reload the list of managers, to get them in the correct order
             .then(() => {
                 handleClose();
                 successAlert({
                     id: 'studio.alertTransfer',
-                    values: {name: newHostUsername}
+                    values: {name: hostInfo.newHostUsername}
                 });
             })
             .catch(e => {
@@ -86,8 +93,8 @@ const TransferHostConfirmation = ({
                         className="transfer-outcome-tile"
                         key={hostId}
                         id={hostId}
-                        image={currentHostImage}
-                        username={currentHostUsername}
+                        image={hostInfo.currentHostImage}
+                        username={hostInfo.currentHostUsername}
                         isCreator={false}
                     />
                 </div>
@@ -103,8 +110,8 @@ const TransferHostConfirmation = ({
                         className="transfer-outcome-tile"
                         key={selectedId}
                         id={selectedId}
-                        image={newHostImage}
-                        username={newHostUsername}
+                        image={hostInfo.newHostImage}
+                        username={hostInfo.newHostUsername}
                         isCreator={false}
                     />
                 </div>