How to remove duplicate names in an object with multiple arrays?

I have the object below with different arrays and I want to remove the duplicate names that are showing. How can I do that?

How duplicate names look like

The data is being printed this way

All data

The dsUserId is what is being repeated. And I want to be able to remove duplicate dsUserId

Here is where all the data is being generated.

  this.setState({
      user_connections: results.data.data.connections,
      newLeads: results2.data.data,
      promotion: results3.data.data,
      hasPromotion: results3.data.data.length === 0 ? false : true,
      promoPlan: promoPlan,
      toRemoveDays: excludedDays
    });

    console.log("All data", this.state.user_connections)
  }

And here is where the data is being rendered.

  <select
    id="user_select"
    style={{ width: "70%" }}
    name="selectedUser"
    onChange={e => {
      this.setState({
        [e.target.name]: e.target.value.trim()
      });
    }}
    className="form-control"
  >
    <option value={null} disabled hidden selected>
      Please Select
    </option>
    {this.state.user_connections.map(u => (
      <option value={u.parentId} key={u.parentId}>
        {u.displayName}
      </option>
    ))}
  </select>

>Solution :

You can use filter to achieve this for eg:

const userConnections = (connections) => {
    const uniqueIds = [];
    return connections.filter(connection => {
       if (!uniquesIds.includes(connection.dsUserId) {
           uniqueIds.push(connection.dsUserId);
           return connection;
       }
    })
};

and then :

user_connections: userConnections(results.data.data.connections)