Custom implementation of Bootstrap dropdown in React - reactjs

Question

I'm trying to build a Dropdown component in React with Bootstrap styling without using a library like react-bootstrap or reactstrap.
I'm a little confused on how to implement the bootstrap javascript into a React component.
I suspect I need to use refs to instantiate a new Dropdown class, but with what I have below the dropdown does nothing and there are no errors in console.
import React, { useRef, useEffect } from 'react'
import '#popperjs/core'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.js'
import { Dropdown } from 'bootstrap'
function App() {
const dropdownRef = useRef<any>(null)
useEffect(() => {
if (dropdownRef.current) {
new Dropdown(dropdownRef.current, {
autoClose: 'inside'
})
}
}, [dropdownRef.current])
return (
<div>
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
ref={dropdownRef}
>
Dropdown button
</button>
<ul className="dropdown-menu dropdown-menu-dark">
<li><a className="dropdown-item active" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
<li><hr className="dropdown-divider" /></li>
<li><a className="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
);
}
What am I missing here? The docs are pretty sparse on how to implement the javascript.