Best practices breadcrumb component for React following Google microdata guidelines

breadcrumb.js

// Takes children and wraps them with microdata for SEO purposes
// https://developers.google.com/search/docs/data-types/breadcrumb#guidelines
const BreadCrumbs = ({children}) => (
  <ol className="breadcrumbs" itemScope itemType="https://schema.org/BreadcrumbList">
    {
      React.Children.map(children, (child, i) => (
        <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
          {
            React.cloneElement(child, {
              itemProp: 'item',
              itemType: 'https://schema.org/Thing'
            })
          }
          <meta itemProp="position" content={i + 1} />
        </li>
      ))
    }
  </ol>
)


BreadCrumbs.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]).isRequired
}

export default BreadCrumbs

usage.js

<BreadCrumbs>
  <a href="#">One</a>
  <Link to="/">Two</Link>
</BreadCrumbs>