Selected property not working about react-horizontal-scrolling-menu HOT 23 CLOSED

const list = [
  { name: 'item1' },
  { name: 'item2' },
  { name: 'item3' },
  { name: 'item4' },
  { name: 'item5' },
  { name: 'item6' },
  { name: 'item7' },
  { name: 'item8' },
  { name: 'item9' },
  { name: 'item10' },
  { name: 'item11' },
  { name: 'item12' },
  { name: 'item13' },
  { name: 'item14' },
  { name: 'item15' },
  { name: 'item16' },
  { name: 'item17' },
  { name: 'item18' },
  { name: 'item19' },
  { name: 'item20' },
  { name: 'item21' },
  { name: 'item22' },
  { name: 'item23' },
  { name: 'item24' },
  { name: 'item25' }
];

const MenuItem = ({ text, selected }) => {
  return (
      <div
          className={`${Styles.menu_item} ${selected ? Styles.active : ''}`}
      >
        {text}
      </div>
  );
};

export const Menu = (list) => list.map(el => {
  const { name } = el;

  return (
      <MenuItem
          text={name}
          key={name}
      />
  );
});

const Arrow = ({ text, className }) => {
  return (
      <div
          className={className}
      >{text}</div>
  );
};

export const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
export const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });


class TabComponent extends Component {

  constructor(props) {
    super(props);
    this.menu = null;

    this.state = {
      selected: 'item1',
      itemsCount: list.length,
      translate: 0,
      alignCenter: true,
      dragging: true,
      clickWhenDrag: false,
      transition: 0.4,
      wheel: true
    };
    this.menuItems = Menu(list.slice(0, list.length), this.state.selected);
  }

  onUpdate = ({ translate }) => {
    console.log(`onUpdate: translate: ${translate}`);
    this.setState({ translate });
  }

  onSelect = key => {
    console.log(`onSelect: ${key}`);
    this.setState({ selected: key });
  }

  componentDidUpdate(prevProps, prevState) {
    const { alignCenter } = prevState;
    const {
      alignCenter: alignCenterNew
    } = this.state;
    if (alignCenter !== alignCenterNew) {
      this.menu.setInitial();
    }
  }

  setItemsCount = ev => {
    const { itemsCount = list.length, selected } = this.state;
    const val = +ev.target.value;
    const itemsCountNew = !isNaN(val) && val <= list.length && val >= 0
        ? +ev.target.value
        : list.length;
    const itemsCountChanged = itemsCount !== itemsCountNew;

    if (itemsCountChanged) {
      this.menuItems = Menu(list.slice(0, itemsCountNew), selected);
      this.setState({
        itemsCount: itemsCountNew});
    }
  }

  setSelected = ev => {
    const { value } = ev.target;
    this.setState({ selected: String(value) });
  }

  test = () => {
    console.log(`onSelect: item12`);
    this.setState({ selected: 'item12' });
  }

  render() {
    const {
      selected,
      translate,
      alignCenter,
      dragging,
      clickWhenDrag,
      transition,
      wheel,
      itemsCount
    } = this.state;

    const menu = this.menuItems;

    const checkboxStyle = {
      margin: '5px 10px'
    };
    const valueStyle = {
      margin: '5px 10px',
      display: 'inline-block'
    };
    return (
        <div className="App">
          <header className="App-header">

            <h1 onClick={this.test} className="App-title">React horizontal scrolling menu</h1>
          </header>
          <p className="App-intro" onClick={this.test}>
            Horizontal scrolling menu example.
            Click arrow or drag items.
          </p>
          <ScrollMenu
              ref={el => this.menu = el}
              data={menu}
              arrowLeft={ArrowLeft}
              arrowRight={ArrowRight}
              transition={+transition}
              onUpdate={this.onUpdate}
              onSelect={this.onSelect}
              selected={selected}
              translate={translate}
              alignCenter={alignCenter}
              dragging={false}
              clickWhenDrag={clickWhenDrag}
              wheel={wheel}
          />
        </div>
    )
  }
}