I have a form where in the properties there is a function, in the main I called this form and I have to pass a function that has an array each element of that array I have to call an http request of type PUT and I have an infinite loop problem. have ideas guys??

Form.ts:(it is not complete, I only put the part where the function is)

interface UserFormProps {
    
    selectedUser?: User | null
    formType: string
    onSave: (val: UserFormData) => Promise<boolean>
    onDismiss: () => void
    isVisible: boolean
    GroupFilterSelection?:any
    RoomFilterSelection?:any
    OnAddUser ?:()=>void
}

    <Label >{t('Assegnare Rooms')}</Label>
                {boolean?
                <>
                 <div className="row">
                   <div className="col ">
                     { GroupFilterSelection }
                   </div>
                   </div>
                   <div className="row">
                   <div className="col">
                      { RoomFilterSelection}                 
                   </div>
                
                   <div>
                   <PrimaryButton className="mt-4" onClick={()=>OnAddUser} >{t('Add userRoom')}</PrimaryButton>
                   </div>
                   </div>
                   </>
                 :null
            
                }

Function:

async function AddRoomUser(){
      if(filterrooms&&filterrooms.length>0 && selectedUser){
        
        for await(let i of filterrooms){
           let item : RoomUser = {
           UsersId :selectedUser.UsersId,
           UsersName : selectedUser.User,
           RoomId :i.RoomId
          }
           await dispatch(AddUserRoom(item))
           
        }
        
      }
    }

Main.ts(code html):

<UserForm selectedUser={selectedUser} formType={addOrEditUser} isVisible={displayUserForm} onSave={saveUser} onDismiss={dismissForm} GroupFilterSelection={GroupSelectionFilter} RoomFilterSelection={roomSelectionFilter} OnAddUser={()=>AddRoomUser} ></UserForm>