Removing duplicate value from a json object called from an api

Question

I call an API which holds my data with the duplicate values in

async fetch() {
    const { user } = this.props;
    try {
        const res = await Data(user.token);
        this.setState({ data: res });
    } catch(error) {
        console.log('Error: cant retrieve ata', error);
    }
}

I then set a filter on this data

setFilteredContracts() {
    const { contracts, firstFilter, secondFilter, searchBar } = this.state;
    if (contracts) {
        let data = contracts; //take the unfiltered data of contracts from the fetch
        if(firstFilter != '') { //first filter refers to the selection of primary officer
            data = data.filter(contract =>
                contract.primaryOfficerInfo.id === firstFilter);
        }
        if(secondFilter != '') { //second filter referes to the selection of the secondary officer
            data = data.filter(contract =>
                contract.secondaryOfficerInfo.id === secondFilter);
        }
        if(searchBar != '') {   //refers to the manual searching
            data = data.filter(contract => {
                if(contract.title.toLowerCase().includes(searchBar.toLowerCase())) {
                    return contract;
                }
            });
        }
        return data;
    }
}

Pass it into another component

const filteredContracts = this.setFilteredContracts();
<ContractsTable contracts = { filteredContracts }/>

And then finally render it on my front end using a map

{contracts &&
  contracts.map(contract => {
    return (
      <MenuItem
        key={contract.primaryOfficerInfo.id}
        value={contract.primaryOfficerInfo.id}
      >
        {contract.primaryOfficerInfo.firstName +
          " " +
          contract.primaryOfficerInfo.lastName}
      </MenuItem>
    );
  })}

But if I have two Jane Doe's they appear within my menu Item, I just need one Jane Doe, how would I achieve this?