Modals are unresponsive and lack backdrop in Rails 7.1.3 with Flowbite 2.3.0

Description
In a Rails 7 application using Flowbite 2.3.0, modals appear on the page but are unresponsive—clicks on modal buttons do not trigger any actions. Additionally, the modal lacks a visible backdrop, which affects the UI's focus and usability.

Hamburger menu works fine.

To Reproduce
Steps to reproduce the behavior:

1. Set up a Rails 7 application with Flowbite 2.3.0 integrated.
2. Add a modal component to a view using Flowbite's standard modal configuration.
3. Trigger the modal using a button or a link.
4. Observe that the modal appears but buttons are unresponsive and no backdrop is visible.

Expected behavior
I expected the modal to not only display but also respond to interactions (e.g., closing the modal or clicking any buttons within it). Additionally, a backdrop should appear behind the modal, dimming the rest of the web page to focus user interaction on the modal content.

Screenshots
Here's a screengrab.

Desktop:

• OS: MacOS
• Browser: Chrome & Firefox

Smartphone :

• Device: iPhone 15
• Browser: Safari

Additional context
This issue might be related to JavaScript or CSS conflicts within the Flowbite and Rails asset pipeline integration, possibly due to the Turbolinks/Turbo Drive in Rails. Any insights or fixes would be greatly appreciated.

importmap.rb:

pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin "flowbite", to: "https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.turbo.min.js", preload: true
pin 'apexcharts', to: 'https://cdn.jsdelivr.net/npm/apexcharts@latest/dist/apexcharts.min.js', preload: true

application.js:

import "controllers"
import "flowbite"
import 'apexcharts'

tailwind-config.js:

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a","950":"#172554"}
      }
    },
    fontFamily: {
      'body': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ],
      'sans': [
    'Inter', 
    'ui-sans-serif', 
    'system-ui', 
    '-apple-system', 
    'system-ui', 
    'Segoe UI', 
    'Roboto', 
    'Helvetica Neue', 
    'Arial', 
    'Noto Sans', 
    'sans-serif', 
    'Apple Color Emoji', 
    'Segoe UI Emoji', 
    'Segoe UI Symbol', 
    'Noto Color Emoji'
  ]
    }
  }
}

Start by reproducing the modal behavior using the Rails importmap.rb and application.js configuration shown, focusing on the Flowbite 2.3.0 Turbo import and initialization. Inspect how the modal is initialized and verify that modal buttons respond and that a backdrop appears, using the provided browser and device cases to confirm the fix.