I am getting console log for the *value* attr of `option` tag, but it is giving me an `undefined` for *data* attr of it's console log as i am doing the same thing for both so why the data attr is undefined ?

field.js

import { usersContext } from '../../Context';

class UserssField extends React.Component {

    constructor (props) {
        super(props);
    }

    selectUsers(e) {
        var options = e.target.options;
		var value = ''; var data = '';
		for (var i = 0, l = options.length; i < l; i++) {
		    if (options[i].selected) {
		        console.log(options[i])
		        value = options[i].value;
		        data = options[i].data;
		    }
		}
		usersContext._currentValue.selectedValue = value;
		usersContext._currentValue.selectData = data;
		console.log(usersContext._currentValue.selectedValue);
		console.log(usersContext._currentValue.selectData);
    }

    render () {
        return (
            <div className="form-group">
                <select className="form-control" onChange={this.selectUsers} >
                    <option value="5e0fd754391c1207d689e8" data="john">john</option>
                </select>
            </div>
        );
    }
}

export default UserssField;