How to use data attributes with Material UI?

I recently started using Material Design React, but I have just come across that data-someField does propagate the value to the dataset map.

Example:

<Input data-role=‘someValue’  onChange={this.onChange} />

onChange = e => {
   const role = e.target.dataset.role
   const role2 = e.currentTarget.dataset.role
}

Both roles in the onChange handler are undefined. This doesn’t happen if I change the Input tag to a regular HTML input.

Any ideas why Material Design doesn’t allow data attributes or if there is any workarounds?

Using the suggestion from @Springer, I tried using inputProps, but noticed that only the name attribute is available, the rest are undefined.

<Input
    value={role.name}
    disabled={!this.state.editMode}
    inputProps={{
        name: 'MyName',
        role: 'MyRole',

        dataset: {
            degree: 'Teniente'
        },

        data: {
            roleId: role.uuid
        },

        dataRoleId: {
            roleId: role.uuid
        }
    }}

    disableUnderline={true}
    data-role-id={role.uuid}
    role={role}
    onChange={this.onChangeExistingRole}
/>

In the react material api they use the inputProps to pass extra object (props , data..)

see doc

inputProps : Attributes applied to the input element.

by example to add role data attribute you should add to your inputProps props the data-role options ( 'data-role':'roleAttrib' ), the input should look like:

<Input   value={role.name}
         disabled={!this.state.editMode}
         inputProps={{
            name: 'MyName',
            'data-role':'role' // <------- add data attribute like this
            ... 
         }} />

same thing for other component Except <Button> you add the data attribute directly in component like

<Button  data-your-attrib="value" />