How to render a field of same name only one time in react native while mapping

I have a realm database synced up. The database contains multiple products having categories and company name. Some products have same company name, some products have same category name and some products have everything same except id. What I need to do is make a browse component where the user can browse for company name. I created an autocomplete search. The search should autocomplete the company name show categories of products in the screen. What I am facing right now is the autocomplete search shows same company name multiple times (for each product in the database). Also I need to render the categories having same name only one time.

Here's my database schema:

import Realm from 'realm';
import axios from 'axios';

class Product extends Realm.Object {}
Product.schema = {
  name: 'Product',
  properties: {
    cname: 'string',
    pname: 'string',
    id: 'int',
    price: 'string',
    code: 'string',
    category: 'string',
  },
  primaryKey: 'id',
};

let getAllProducts = () => {
  return realm.objects('Product');
};
export {getAllProducts}

Browse Screen:

import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  FlatList,
  TouchableWithoutFeedback,
  Alert,
} from 'react-native';
import {Searchbar, RadioButton} from 'react-native-paper';
import {
  ApplicationProvider,
  Button,
  Icon,
  IconRegistry,
  Layout,
  Card,
} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';
import {getAllProducts, addProduct, deleteAllProduct} from '../database/realm';
import {Autocomplete, AutocompleteItem} from '@ui-kitten/components';
import TextTicker from 'react-native-text-ticker';

const filter = (item, query) =>
  item.cname.toLowerCase().includes(query.toLowerCase());

const StarIcon = props => <Icon {...props} name="star" />;

export default function browse() {
  const [value, setValue] = React.useState(null);
  const [data, setData] = React.useState(getAllProducts());
  const onSelect = index => {
    setValue(data[index].cname);
  };
  const onChangeText = query => {
    setValue(query);
    setData(getAllProducts().filter(item => filter(item, query)));
  };
  const clearInput = () => {
    setValue('');
    setData(getAllProducts());
  };
  const renderOption = (item, index) => (
    <AutocompleteItem key={index} title={item.cname} />
  );
  const renderCloseIcon = props => (
    <TouchableWithoutFeedback onPress={clearInput}>
      <Icon {...props} name="close" />
    </TouchableWithoutFeedback>
  );

  useEffect(() => {
    console.log('company selected:', value);
  });

  function CnameValue() {
    return getAllProducts().filtered('cname == $0', value);
  }
  return (
    <SafeAreaView>
      <Autocomplete
        placeholder="Type company name"
        value={value}
        accessoryRight={renderCloseIcon}
        onChangeText={onChangeText}
        onSelect={onSelect}>
        {data.map(renderOption)}
      </Autocomplete>
    </SafeAreaView>
  );
}