NavItem with Scrollchor error - `<a>` cannot appear as a descendant of `<a>` about react-scrollchor HOT 2 CLOSED

import React, { Component } from "react";
import Scrollchor from "react-scrollchor";

export default class ScrollchorItem extends Component {
  constructor(props) {
    super(props);
  }

  _handleClick = event => {
    this._back.simulateClick(event)
  };

  render() {
    const { to, children, className } = this.props;
    return <span onClick={this._handleClick} className={className} >
      <Scrollchor to={to} ref={ref => (this._back = ref)}/>
      {children}
    </span>
  }
}

import React from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import ScrollchorItem from './src/scrollchor-item';

const HomeNavigation = () => (
  <Nav pullRight>
    <NavItem><ScrollchorItem to="#how" className="nav-link">How?</ScrollchorItem></NavItem>
  </Nav>
);

export default HomeNavigation;