React: Polaris select not allowing option change despite handler existing?

Question

I'm using the Polaris UI kit in React. On the select element, upon changing the dropdown value it doesn't switch the select? It just disappears the dropdown of options and stays the same.

Here is the form JSX:

<Form onSubmit={handleSubmit}>
    {defaultFormFields.filter(function(x) { return x !== 'submit' }).map((x, i) =>
        <Grid key={i}>
            <Grid.Cell columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
                {x}
            </Grid.Cell>
            <Grid.Cell columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
                <Select options={selectOptions} onChange={onChange} name={x} value={selectValues[x.replace('-', '_')]}></Select>
            </Grid.Cell>
            <div style={{height:4 + 'px'}}></div>
        </Grid>
    )}
    <Button variant="primary">Save</Button>
</Form>

JS:

const [selectValues, setSelectValues] = useState({
        first_name: 'first-name',
        last_name: 'first-name',
        company_name: 'first-name',
        telephone: 'first-name',
        website: 'first-name',
        email: 'first-name',
        address1: 'first-name',
        address2: 'first-name',
        country: 'first-name',
        city: 'first-name',
        state: 'first-name',
        zipcode: 'first-name',
    });

function onChange(selected, id) {
    let name = document.getElementById(id).getAttribute('name').replace('-', '_');
    let currentState = selectValues;

    currentState[name] = selected;

    setSelectValues(currentState);

    console.log(name + ' to ' + selected);
}