I'm trying to get all selected values from a react-bootstrap Form. On the latest version of bootstrap e.target.value only seems to contain a single value instead of a list when multiple values are selected by shift clicking multiple lines. How can I get all selected values? Preferably by key or id.

const Form = ReactBootstrap.Form;
const Button = ReactBootstrap.Button;

const ExampleForm = () => {

  const [output, setOutput] = React.useState("");
  
  function changeSelection(e) {
    setOutput(e.target.value);
  }
  
  function handleSubmit(e) {
    e.preventDefault();
  }
  
  return(
    
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="dimension">
        <Form.Control 
          as="select" 
          multiple 
          onChange={changeSelection}>
          <option key="1" id="1" >1</option>
          <option key="2" id="2" >2</option>
          <option key="3" id="3" >3</option>
          <option key="4" id="4" >4</option>
        </Form.Control>
        <Button type="submit" variant="primary">
                select
        </Button>
      </Form.Group>
      Output: {output}
    </Form>

  );

}

ReactDOM.render(
    <ExampleForm />,
    document.getElementById('app')
);

Codepen example can be found here