Material Design Components select menu not renderi

I'm trying to add a basic MDC select menu to my website. But it's not quite right—the right of the box shows the MDC arrow along with the normal HTML one, and the words are placed too close to the menu label (seen here).

HTML part—

<div class="mdc-select mdc-select--box day-select">
  <select class="mdc-select__native-control" required>
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

app.scss part

@import "@material/select/mdc-select";

and the final app.js part

import {MDCSelect} from '@material/select';
new MDCSelect(document.querySelector('.day-select'));

Seems like I have everything I need, but I'm obviously missing something dumb. Any advice is appreciated—thanks!

The styling issues must be coming from some additional css or js that you are not showing in your question. Check out the following snippet which contains your code inside a clean document with nothing but the MDC css and js and you will see that the field looks as expected.

mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Select Field</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control">
      <option value="" disabled selected></option>
      <option value="grains">
        Bread, Cereal, Rice, and Pasta
      </option>
      <option value="vegetables">
        Vegetables
      </option>
      <option value="fruit">
        Fruit
      </option>
    </select>
    <label class="mdc-floating-label">Pick a Food Group</label>
    <div class="mdc-line-ripple"></div>
  </div>

</body>

</html>