I'm currently writing Jest unit tests for two separate Material UI components that I am using: TextField and Menu.

In short, my component looks something like this:

MyComponent.js

<h3>Hello</h3>

<Textfield 
    name="myTextField"
    onChange={//onChangeMethod}
    value={//valueOfAState}
    inputProps={{ "data-testid": "textfield-input" }}
/>


<Menu
    open={true}
    data-testid="case-menu-select"
>
    <MenuItem>
        <ListItemText
            data-testid="list-item-select-option1"
            key="1"
        >
            First Item
        </ListItemText>
    </MenuItem>
    <MenuItem>
        <ListItemText
            data-testid="list-item-select-option2"
            key="2"
        >
            Second Item
        </ListItemText>
    </MenuItem>
</Menu>

Essentially, I'm trying to write a test that will select the second option from the Menu. I've written a test that looks something like this:

test("test menu select options", async () => {
    const { getByTestId } = Render(<MyComponent />)

    const text = getByTestId("textfield-input")
    fireEvent.change(text, { target: { value : "whatever text" } }) //works fine

    const menuSelect = getByTestId("case-menu-select")
    // select second option from the menu
    fireEvent.change(menuSelect, { target: { value: 2 } }) //fails
})

I'm getting an error at the line that fails:

The given element does not have a value setter

I've included the TextField example to showcase that it works. I've also tried to set an inputProps to the Menu component, but that doesn't exist.

How can I select an option from a Menu component?