title: How to not show the duplicate if it exists already?
body: <p>I want to make an alphabet index for businesses, and struggling to eliminate the duplicate.
  Like below:</p>
  <pre><code>T
    Toy Store 1
    Toy Store 2
    Toy Store 3
  </code></pre>
  <p>So I sliced the initial letter of the business and want to delete it if the letter is already shown like below:</p>
  <pre><code>T
    Toy Store 1
  T // &lt;- want to delete
    Toy Store 2
  T // &lt;- want to delete
    Toy Store 3
  </code></pre>
  <p>I tried using <code>new Set</code> but it does not work. I also tried using <code>indexOf</code> and filter method but didn't work either. Appreciate any help.</p>
  <p>Component <code>ListItem</code></p>
  <pre class="lang-js prettyprint-override"><code>export default function CatListItem(props) {
    const {image,title,slicedInitial,onPress} = props;
      return (
        &lt;View&gt;
              &lt;Text&gt;
                {slicedInitial}
              &lt;/Text&gt;
              &lt;Text&gt;
                {title}
              &lt;/Text&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>
  <p>Screen:</p>
  <pre class="lang-js prettyprint-override"><code>const renderList = () =&gt; {
  
  //does not work
  const indexedSlicedInitial=(item)=&gt;{
    const slicedInital=item.title.slice(0,1)
    const index = [...new Set(slicedInital)]
    return index
  }
  //
      return (
        &lt;View&gt;
          {
            &lt;Animated.FlatList
              data={data.list}
              key={&quot;list&quot;}
              keyExtractor={(item, index) =&gt; `list ${index}`}
              renderItem={({ item, index }) =&gt; (
                &lt;ListItem
                  list
                  title={item.title}
                  slicedInitial={() =&gt; indexedSlicedInitial(item)}
                  onPress={() =&gt; onProdDetail(item)}
                /&gt;
            /&gt;
      );
    };
  </code></pre>