Could someone please explain how to fix this error

Warning: flattenChildren(...): Encountered two children with the same
key

I have replicated my code below, but for some reason CodePen is not showing the error.

var FilterOptions = React.createClass({

changeOption: function(type, e) {

var val = e.target.value;

this.props.changeOption(val, type);

},



render: function() {



return (

  <div className=filter-options>

    <div className=filter-option>

      <select id=product name=Product value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>

      <option value=''>Product</option>

      {this.props.productOptions.map(function(option) {

        return (<option key={option}  value={option}>{option}</option>)

      })}

      </select>

  </div>

  </div>

 );

 }

 });

Codepen

As a secondary question, I am pretty sure my reset is supposed to reset the values of the select boxes but this is also not working and just resetting the rendered results - not sure if this is related to the first problem?

Any help much appreciated