Materialize css --select-- not working in react

I am using basic materialize css and for some reason even if I copy it straight from the materializecss.com website my select option just shows the label and nothing else is there.

EDIT added index.hjs page for reference of scripts.

In my index.hjs here are all my imports for the materialize css:

<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>
  <div id="root"></div>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script type="text/javascript" src="/build/bundle.js"></script>
</body>

</html>

Here is the code:

      <div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="title"
              type="text"
            />
            <label htmlFor="title">Title</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="description"
              type="text"
            />
            <label htmlFor="description">Description</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12">
            <select id="category" onChange={this.updateTask.bind(this)}>
              <option value="" disabled selected>
                Choose your category
              </option>
              <option value="delivery">Delivery</option>
              <option value="dog walking">Dog Walking</option>
              <option value="house cleaning">House Cleaning</option>
            </select>
            <label>Category</label>
          </div>
        </div>
        <div className="row">
          {/* <button
            onClick={this.submitTask.bind(this)}
            className="btn waves-effect waves-light"
            >
            Submit
            <i className="material-icons right">send</i>
          </button> */}
        </div>
      </div>

Solution

Materialize.css overrides browser defaults to enable select tag. To avoid this, you can use "browser-default" class in select tag.

<select class="browser-default">
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
 </select>