Dropdown with default value from async request array

Hello,

We are fetching records from server and creating a dropdown list and would like to set the first item in that list as the default selected item in the dropdown. The example in the documentation only shows a hardcoded list with a "Select sport..." default item.We tried to set the default item to the first element in the async list, but the first element will show up twice in the dropdown! Please help:

import React from 'react';
import ReactDOM from 'react-dom';
import { DropDownList } from '@progress/kendo-react-dropdowns';

class AppComponent extends React.Component {
    sports = [ 'Basketball', 'Football', 'Tennis', 'Volleyball' ];

    render() {
              return (
                    <DropDownList
                          data={this.sports}
                           defaultItem={this.sports[0]}
                    />
);
}
}

ReactDOM.render(
<AppComponent />,
document.querySelector('my-app')
);