What is the difference between key and id in React component?

I have this in the parent component.

          <RefreshSelect
            isMulti
            cacheOptions
            id='a'
            key = 'a'
            components={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />
          <RefreshSelect
            isMulti
            cacheOptions
            id='b'
            key='b'
            components={makeAnimated()}
            options={this.state['filter']['provider']}
            onChange={this.handleChangeProvider}
          />

In the definition of this child component, I have the constructor that updates default values depending on the id/key.

export default class RefreshSelect extends Component {
  constructor(props) {
    super(props);
    // console.log(props)
    // console.log(props.key)
    if (props.key==''){
      this.state = { value: [{ value: 'all', label: 'all', color: '#666666' }] };
    }else if ( props.key=='a') {
      this.state = { value: [{ value: '123', label: '123', color: '#666666' },
      { value: '234', label: '234', color: '#666666' },
      { value: '456', label: '456', color: '#666666' }] };
    }else {
      this.state = { value: [{ value: 'nvnvnvnvn', label: 'ksksksksks', color: '#666666' }] };
    }
  }

  render() {
    console.log(this.props)
    return (
      <Select
        isMulti
        defaultValue={this.state.value}
        options={this.props.options}
        components={makeAnimated()}
        placeholder={this.props.label}
        onChange={this.props.onChange}
      />
    );
  }
}

First, it looks like I'm not able to assign the key and access it in the constructor. Why is that? Secondly, what is the difference between id and key? Which one should I use and when?