Как отсортировать с помощью filter() свойство компонента?

import React, { Component } from 'react';
import {render} from 'react-dom';
import ItemsList from "../src/components/App"

const propsValues = {
  title: "Список смартфонов",
  items: [
          "HTC U Ultra", 
          "iPhone 7", 
          "Google Pixel", 
          "Hawei P9", 
          "Meizu Pro 6",
          "iPhone 7",  
          "Asus Zenfone 3"
  ]
};

render(<ItemsList data={propsValues} />, document.getElementById('root'));

сам файл компонентов

import React, { Component } from 'react';
class Item extends React.Component {
  render() {
      return <li>{this.props.name}</li>;
  }
}
class ItemsList extends React.Component {
  render() {
      return(
          <div>         
              <h2>{this.props.data.title}</h2>
              <ul>
              {
                  this.props.data.items.map(function(item){                       
                      return <Item key={item} name={item} />
                  })
              }
              </ul>
          </div>);
  }
}

 export default ItemsList;

Как с помощью filter отсортировать в компоненте списка нужное? инструкция типа

this.props.data.items.filter(function(item){                       
                      return <Item key={item} name={item === "iPhone 7"} />
                  })

не работает