Выпадающее меню материализации не работает при использовании предварительного загрузчика

Question

Я пытаюсь использовать выпадающее меню из materializecss в моей панели навигации, но я использую предварительный загрузчик, потому что вещи из моей панели навигации должны быть получены из моего бэкэнда, но по какой-то причине это нарушает раскрывающийся список, оно просто непоказать вверх.

моя навигационная панель:

// React stuff
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';

// Redux stuff
import { connect } from 'react-redux';
import { getLang } from '../langActions';

// Import components
import Preloader from '../preLoader';

// Materialize stuff
import M from 'materialize-css';

const NavBar = ({ lang: { language, loading }, getLang }) => {
  useEffect(() => {
    getLang(0);
    let dropdowns = document.querySelectorAll('.dropdown-trigger');
    let options = {
      inDuration: 300,
      outDuration: 225,
      hover: true,
      belowOrigin: true
    };
    M.Dropdown.init(dropdowns, options);

    // eslint-disable-next-line
  }, []);

  if (!language || loading) {
    return <Preloader />;
  }

  return (
    <nav className='blue darken-2'>
      <div className='nav-wrapper'>
        <Link to='/' className='brand-logo' style={{ marginLeft: '1%' }}>
          SwimTechNL
        </Link>
        <ul
          className='right hide-on-med-and-down'
          style={{ marginRight: '1%' }}
        >
          <li>
            <Link to='/hire'>test</Link>
          </li>
          <li>
            <Link to='/contact'>test</Link>
          </li>
          <li>
            <Link to='/about'>test</Link>
          </li>
          <li>
            <Link to='/login'>test</Link>
          </li>
          <li>
            <a
              id='FirstDropDown'
              className='dropdown-trigger'
              href='#!'
              data-target='dropdown1'
              onMouseEnter={e => {
                const inst = M.Dropdown.getInstance(e.target);
                inst && inst.open();
              }}
            >
              Dropdown <i className='material-icons right'>arrow_drop_down</i>
            </a>
            <ul id='dropdown1' className='dropdown-content'>
              <li>
                <a href='#!'>one</a>
              </li>
              <li>
                <a href='#!'>two</a>
              </li>
              <li className='divider'></li>
              <li>
                <a href='#!'>three</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  );
};

const mapStateToProps = state => ({
  lang: state.lang
});

export default connect(
  mapStateToProps,
  { getLang }
)(NavBar);

Если я удаляю предварительный загрузчик (что возможно, потому что я убрал необходимость получать вещи из моего бэкэнда в качестве временного решения), он работает нормально. У кого-нибудь есть идея, почему это происходит?