Redux-Form (V6) & Materialize.css 's Radio Button not working - materialize

Question

I am having trouble combining with Redux-Form and Materialize.css's radio button.
Because of the syntax issue ( I believe label is the cause of it), if I combine both, it stops working (meaning that I cannot select any of the radio buttons).
If I take out the materialize.css, Redux-Form works properly.
Is it possible to combine both of these?
Here's a snippet of the code:
render() {
const { chartData, chartOptions } = this.state;
const { handleSubmit, submitting } = this.props
return (
<main className="welcome container">
<div className="row">
<div className="col center-align s12">
<h3>Title of the Poll</h3>
</div>
</div>
<BarChart data={chartData} options={chartOptions}/>
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<div className="row">
<div className="col s12">
<p>
<Field name="category" component="input" type="radio" value="male"/>
<label>Male</label>
</p>
<p>
<Field name="category" component="input" type="radio" value="female"/>
<label>Female</label>
</p>
</div>
<div className="col input-field s12">
<button className="btn waves-effect waves-light" type="submit" name="action">Submit
<i className="fa fa-paper-plane-o"></i>
</button>
</div>
</div>
</form>
</main>
)
}

Answer 1

Looking at CSS, it looked like by Materialze.css default, the html's input radio button has a left property of 99px which goes away from the screen.
Knowing that, I had to just insert a custom CSS on my own to move the input and align it above the radio button that materilize renders.
Here's what I came up with:
css
.radio-button-css{
position: relative !important;
z-index: 12;
// opacity: 1 !important;
left: 18px !important;
}
Notice I've inserted radio-button-css inside the Field attribute
<div className="row">
<div className="col s12">
<p>
<Field name="category" component="input" type="radio" className="radio-button-css" value="male"/>
<label>Male</label>
</p>
<p>
<Field name="category" component="input" type="radio" className="radio-button-css" value="female"/>
<label>Female</label>
</p>
</div>
<div className="col input-field s12">
<button className="btn waves-effect waves-light" type="submit" name="action">Submit
<i className="fa fa-paper-plane-o"></i>
</button>
</div>
</div>
From there, adjust the left property in the radio-button-css and after you are finish, set the opacity back to zero ( you need to set one to actual see the html's radio button)