bootstrap4 dropdownボタンが動作しない(rails6)

前提・実現したいこと

bootstrapのdropdownボタンを正常に反応させたい

発生している問題・エラーメッセージ

dropdownが反応する時としない時があります。反応してもすぐに消えてしまいます。

該当のソースコード

/app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <%= link_to "Cartrip", root_path, id: "logo" %> <nav> <ul class="nav"> <li><%= link_to "ホーム", root_path, class: "btn" %></li> <li><%= link_to "ヘルプ", help_path, class: "btn" %></li> <% if logged_in? %> <li><%= link_to "ユーザー", "#", class: "btn" %></li> <li class="dropdown"> <a href="#" id="btnopenmenu "class=" btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > アカウント </a> <ul class="dropdown-menu" aria-labelledby="btnopenmenu" > <li><%= link_to "プロフィール", current_user, class: "dropdown-item" %></li> <li><%= link_to "設定", '#', class: "dropdown-item" %></li> <li class="divider"></li> <li> <%= link_to "ログアウト", logout_path, method: :delete, class: "btn" %> </li> </ul> </li> <% else %> <li><%= link_to "ログイン", login_path, class: "btn" %></li> <% end %> </ul> </nav> </div> </header>

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const erb = require('./loaders/erb')

environment.loaders.prepend('erb', erb)

const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)

module.exports = environment

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")
require("bootstrap")

import 'bootstrap-material-design'
import '../stylesheets/application'

gemfile

ruby '2.6.6'
gem 'rails', '> 6.0.3', '>= 6.0.3.2'
gem 'puma', '> 4.1'
gem 'sass-rails', '>= 6'
gem 'webpacker', '> 4.0'
gem 'turbolinks', '> 5'
gem 'jbuilder', '> 2.7'
gem 'bcrypt', '> 3.1.7'
gem 'bootsnap', '>= 1.4.2', require: false