ReactJS Semantic UI dropdown onChange won't fire if the user selects the same item twice

Question

I have a File menu that contains 3 options:

const fileOptions = [
  { key: 'open', icon: 'open folder outline', text: 'Open lesson', value: 'open' },
  { key: 'save', icon: 'save', text: 'Save lesson', value: 'save' },
  { key: 'delete', icon: 'delete', text: 'Delete lesson', value: 'delete' },
]

Everything works fine but if I select for example "Save lesson" twice it will work the first time only (I'm using the onChange event). And that's because the value of the dropdown did not change. What event should I usr?

     <Button.Group color='teal'>
        <Dropdown

          className='button icon'
          floating
          options={fileOptions}
          trigger={<React.Fragment />}
          onChange={this.handleLessonMenu}
        />
      </Button.Group>

Answer 1

I kind of sorted the issue out by changing the code as follows:

      <Dropdown
        text='File'
        fluid
      >
        <Dropdown.Menu >
          <Dropdown.Item text='Add section'
            onClick={this.addSection}
          />
          <Dropdown.Divider />
          <Dropdown.Item text='New lesson' />
          <Dropdown.Item text='Open lesson' description='ctrl + o' />
          <Dropdown.Item text='Save lesson' description='ctrl + s'
            onClick={this.handleSave}
          />
          <Dropdown.Divider />
          <Dropdown.Item text='Delete lesson' description='ctrl + d' />
        </Dropdown.Menu>
      </Dropdown>