React Widgets + Redux-Form editable dropdown

Question

I am using Redux-form and pulling in data to initilise my multi-select(dropdown) box. Here is the example of this from the redux-form site - https://redux-form.com/6.0.0-rc.1/examples/react-widgets/ they use react-widgets as an add-on.

The example allows you to select a favorite color, and it will list the selections available. Here is my codesandbox of this example - https://codesandbox.io/s/7z5q82np51

I want to be able to add my own option/value in the box if I don't want to choose a pre-populated value. There is a duplicate/similar question on stackoverflow - Editable combo box in Redux-Form but I cant get the solution to work - so don't think its relevant anymore (old version maybe).

If somebody can see how this is done or see the proposed solution and get it to work on my codesandbox example? Any solution with redux-form welcome to get desired result of having a mulitiselect thats also editable to create my own value.

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import DropdownList from 'react-widgets/lib/DropdownList'
import SelectList from 'react-widgets/lib/SelectList'
import Multiselect from 'react-widgets/lib/Multiselect'
import 'react-widgets/dist/css/react-widgets.css'

const colors = [{ color: 'Red', value: 'ff0000' },
{ color: 'Green', value: '00ff00' },
{ color: 'Blue', value: '0000ff' }]

const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Favorite Color</label>
        <Field
          name="favoriteColor"
          component={DropdownList}
          data={colors}
          valueField="value"
          textField="color" />
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: "MaterialUiForm", // a unique identifier for this form
})(MaterialUiForm);

Answer 1

https://codesandbox.io/s/2vmmkmomk0

Using react-select and the creatable component I was able to merge the two.