Convert UseRef to React Hooks - reactjs

Question

I am trying to convert my component to react hooks.
class AppMenu extends Component<Props> {
menuRef = null;
initMenu() {
if (this.props.mode === 'horizontal') {
const menuRef = new MetisMenu('#menu-bar').on('shown.metisMenu', event => {
const menuClick = e => {
if (!event.target.contains(e.target)) {
menuRef.hide(event.detail.shownElement);
}
};
window.addEventListener('click', menuClick);
});
this.menuRef = menuRef;
} else {
this.menuRef = new MetisMenu('#menu-bar');
}
}
}
How do I convert this to hooks? Especially the menuRef part.
I did const menuRef = useRef(null);, but how do I convert the this.menuRef = new MetisMenu('#menu-bar'); to useRef? I tried menuRef.current = new MetisMenu('#menu-bar'); but it throws an error.
Am I doing this the incorrect way?
Thanks

Answer 1

Here is what you need to do:
function AppMenu(props: Props) {
const menuRef = useRef(null);
function initMenu() {
if (props.mode === "horizontal") {
menuRef.current = new MetisMenu("#menu-bar").on(
"shown.metisMenu",
(event) => {
const menuClick = (e) => {
if (!event.target.contains(e.target)) {
menuRef.hide(event.detail.shownElement);
}
};
window.addEventListener("click", menuClick);
}
);
} else {
menuRef.current = new MetisMenu("#menu-bar");
}
}
useEffect(() => {
initMenu();
}, []);
}