Semantic-Ui-React Input with dropdown using Redux-Form

Question

This is maybe a little crazy and edge case but would be great if I could get this to work. I am using semantic-ui-react as a component library, but using redux-form for my form submission and validation. So far while working together, though a little confusing, it's fine.

Currently I am trying to use the semantic-ui-react <Input /> component along side a <Dropdown /> component linked here. It's where the dropdown is attached to the input for similar related input options. The crazy stuff happens when trying to mix in redux-form.

For reusability purposes I have moved the rendering of inputs into separate methods, so here is my method for rendering a dropdown:

  renderDropdownField( field ) {
    const {meta: {touched, error}} = field;
    const className                = `form-group ${touched && error ? 'error' : ''}`;
    return (
        <div className={className}>
          <Form.Dropdown
              {...field.input}
              className='field'
              label={field.label}
              basic={field.basic}
              button={field.button}
              options={field.options}
              placeholder={field.label}
              onChange={( e, {value} ) => field.input.onChange(value)} />
        </div>
    )
  }

This is all normal to the semantic-ui-react code for a <Dropdown /> and its props.

I am calling that method from a redux-form <Field /> component like so:

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Field name='filter.operator'
                      basic='true'
                      button='true'
                      component={this.renderDropdownField}
                      options={operatorOptions} />}
       actionPosition='left' />

So the semantic-ui-react <Dropdown /> is being rendered as the component for the redux-form field of the action of the <Input /> component - mouth full yes, and slightly confusing but it kinda works. The above code works just as I'd expect, I can get the field's values in the redux-form's reducer (for that form), BUT the css is all jacked up. It looks like this:

and in the redux store:

So it is all working as I'd like it to other than the css of the input fields not lining up. The annoying part is I can pass in just a regular <Dropdown /> component from semantic-ui-react into the action={ } prop of the first input and that looks better though I lose access to the selection from the dropdown. The code looks as follows:

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Dropdown name='filter.operator'
                      basic='true'
                      button='true'
                      options={operatorOptions} />}
       actionPosition='left' />

and it is rendered like so:

So bottom line is that I would like for it to look like this (above) but work like the original snippet of code. If I do the the last way I lose access to the redux-form's capabilities of holding the operator's (dropdown's) value, but it looks like I want the end result.