Как сделать уникальные аккаунты в приложении React

Question

Я создаю приложение React, в котором вы входите в систему как администратор и имеете возможность добавлять учетные записи вручную.Я хочу сделать учетные записи уникальными по имени пользователя, но я не знаю, как вызывать прошлые имена пользователей, чтобы сравнить с текущим именем пользователя, которого я хочу зарегистрировать.Это то, что я сделал до сих пор:

  class GroupList extends Component {

constructor(props) {
    super(props);
    this.state = {groups: [], isLoading: true};
    this.remove = this.remove.bind(this);
}

componentDidMount() {
    this.setState({isLoading: true});

    fetch('api/groups')
        .then(response => response.json())
        .then(data => this.setState({groups: data, isLoading: false}));
}

async remove(id) {
    await fetch(`/api/group/${id}`, {
        method: 'DELETE',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    }).then(() => {
        let updatedGroups = [...this.state.groups].filter(i => i.id !== id);
        this.setState({groups: updatedGroups});
    });
}

render() {
    const {groups, isLoading} = this.state;

    if (isLoading) {
        return <p>Loading...</p>;
    }

    const groupList = groups.map(group => {
        const username = `${group.username || ''} `;
        const password= `${group.password || ''}`;
        return <tr key={group.id}>
            <td style={{whiteSpace: 'nowrap'}}>{group.name}</td>
            <td>{username}</td>
            <td>{password}</td>

            <td>
                <ButtonGroup>
                    <Button  className="propreties" size="sm" color="primary" tag={Link} to={"/groups/" + group.id}>Edit</Button>
                    <Button className="propsss" size="sm" color="danger" onClick={() => this.remove(group.id)}>Delete</Button>
                </ButtonGroup>
                <Button className="props1" size="sm" color="success">Change User Role</Button>
            </td>
        </tr>
    });

}

}

экспорт по умолчанию GroupList;

Это класс редактирования:

class GroupEdit extends Component {

emptyItem = {
    name: '',
   username: '',
    password: '',

};

constructor(props) {
    super(props);
    this.state = {
        item: this.emptyItem
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

async componentDidMount() {
    if (this.props.match.params.id !== 'new') {
        const group = await (await fetch(`/api/group/${this.props.match.params.id}`)).json();
        this.setState({item: group});
    }
}

handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    let item = {...this.state.item};
    item[name] = value;

    this.setState({item});
}

async handleSubmit(event) {
    event.preventDefault();
    const {item} = this.state;

    await fetch('/api/group', {
        method: (item.id) ? 'PUT' : 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(item),
    });
    this.props.history.push('/group');
}