Toggle selected users in register and deposit

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/features/deposit/Deposit.tsx

@@ -8,7 +8,7 @@ const Deposit = (): JSX.Element => {
   const {
     loading,
     selectedUser,
-    setSelectedUser,
+    toggleSelectedUser,
     amount,
     setAmount,
     userQuery,
@@ -80,9 +80,7 @@ const Deposit = (): JSX.Element => {
           <UserCard
             key={user.id}
             active={selectedUser === user.id}
-            onUser={() => {
-              setSelectedUser(user.id);
-            }}
+            onUser={() => toggleSelectedUser(user.id)}
             user={user}
           />
         ))}

frontend/src/features/deposit/useDeposit.ts

@@ -10,6 +10,9 @@ export const useDeposit = () => {
   const [selectedUser, setSelectedUser] = useState("");
   const [amount, setAmount] = useState("");
   const [userQuery, setUserQuery] = useState("");
+  const toggleSelectedUser = (userId: string) => {
+    setSelectedUser((currentUserId) => (currentUserId === userId ? "" : userId));
+  };
   const filteredUsers = (data?.allUsers || []).filter((user) =>
     `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()),
   );
@@ -56,7 +59,7 @@ export const useDeposit = () => {
   return {
     loading,
     selectedUser,
-    setSelectedUser,
+    toggleSelectedUser,
     amount,
     setAmount,
     userQuery,