Как реализовать этот процесс? React.js

У меня есть пользователь с двумя параметрами (имя пользователя и группы пользователей)

У меня есть страница, которая обновляет моего пользователя, изменяя имя пользователя и обновляя группы это выглядит как:

Проблема в том, что я не могу выделить группы, мне нужно выбрать обновление.

const AddUser = props =>{
 
  let editing = false;
  let initialUsername = "";
  const[initialGroups, setInitialGroups] = useState([])


  useEffect(()=>{
    retrieveGroups();
    
  },[])

  const retrieveGroups = () => {
    BackendService.getAllGroups()
    .then(response => {
      setInitialGroups(response.data);
    })
    .catch(e => {
      console.log(e);
    });
  }
  


  const[username, setUsername] = useState(initialUsername);
  const[groups, setGroups] = useState(initialGroups);
  const[submitted, setSubmitted] = useState(false);



  const onChangeUsername = e => {

    const username = e.target.value;
    setUsername(username);

  }

  const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }
  const saveUser = () => {
    var data = {
      username: username,
      groups: groups,
      complited: false,
    }
    
    BackendService.editUser(
      props.location.state.currentUser.id,
      data)
      .then(response=>{
        setSubmitted(true);
        console.log(response.data)
      })
      .catch(e=>{
        console.log(e);
      })
   )
  .catch(e=>{
    console.log(e);
  });

    }
  }
  
return(
  <Container>
    {submitted ? (
      <div>
        <h4>
          User Edited Successfully
        </h4>
        <Link to={"/users/"}></Link>
        Back to Users
      </div>
    ):(
      <Form>
        <Form.Group className="mb-3">
          <Form.Label>
            "Edit" User
          </Form.Label>
          <Form.Control
          type="text"
          required
          value={username}
          placeholder="Enter username here"
          onChange={onChangeUsername}
          />
          <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>
        </Form.Group>
        <Button variant="info" onClick={saveUser}>
          "Edit" User
        </Button>
      </Form>
    )}

  </Container>
)
}
export default AddUser;

В этом разделе я получаю все группы (initialGroups), которые у меня есть в базе данных:

 const[initialGroups, setInitialGroups] = useState([])
    
    
      useEffect(()=>{
        retrieveGroups();
        
      },[])
    
      const retrieveGroups = () => {
        BackendService.getAllGroups()
        .then(response => {
          setInitialGroups(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

После того, как я поместил InitialGroups в:

       <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>

И обработать в:

const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }

Что я делаю неправильно? Я не могу выделить группу, мне нужно обработать и обновить пользователя