React map keys issue?

Component.jsx

// https://stackoverflow.com/questions/42773892/wrong-components-rendered-by-preact
// https://facebook.github.io/react/docs/lists-and-keys.html

import * as React from 'react';

class Component extends React.Component<any, any> {
  constructor() {
    super();
    this.state = { listing: ['First', 'Second', 'Last'] };
    setInterval(() => {
      this.setState({ listing: ['First', 'Last'] });
    }, 3000);
  }

  public render() {
    return (
      <div style={{ color: 'white' }}>
        Listing:
        {this.state.listing.map((item: string, index: number) =>
          <div key={index}>
            Item with key {index} is
            <span>{item}</span>
          </div>
        )}
      </div>
    );
  }
}

/*
Results:

Item with key 0 isFirst
Item with key 1 isSecond
Item with key 2 isLast

-- After 3 seconds (correctly changed even when using index)--

Item with key 0 isFirst
Item with key 1 isLast

*/

export default Component;