带垂直线的reactjs-list视图。怎么画这个?

const data = [1, 2, 3, 4, 5, 6];

const Demo = ({ items }) => (
  <ul>
    {
      items.map(key => (
        <li key={key}>item{key}</li>
      ))
    }
  </ul>
);

ReactDOM.render(
  <Demo items={data} />,
  demo
);
  

ul {
  counter-reset: list;
  border-left: 2px solid lightgrey;
  margin: 1em;
  padding: 0;
}

ul li {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
}

ul li:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.5em 0 -0.65em;
  border-radius: 50%;  
  content: counter(list);
  text-align: center;
  background: lightgrey;
  counter-increment: list;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>