fix(ui): update code for react-cool-dimensions v2

ui/src/Components/Grid/AlertGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Ref, useEffect, useState } from "react";
+import React, { FC, useEffect, useState, useRef } from "react";
 
 import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -21,8 +21,9 @@ const AlertGrid: FC<{
   silenceFormStore: SilenceFormStore;
   settingsStore: Settings;
 }> = ({ alertStore, settingsStore, silenceFormStore }) => {
+  const ref = useRef<HTMLDivElement>();
   const { width: windowWidth } = useWindowSize();
-  const { ref, width: bodyWidth } = useDimensions();
+  const { observe, width: bodyWidth } = useDimensions();
 
   const [gridSizesConfig, setGridSizesConfig] = useState<SizeDetail[]>(
     GridSizesConfig(settingsStore.gridConfig.config.groupWidth)
@@ -58,7 +59,12 @@ const AlertGrid: FC<{
 
   return (
     <React.Fragment>
-      <div ref={ref as Ref<HTMLDivElement>} />
+      <div
+        ref={(el) => {
+          observe(el as HTMLElement);
+          ref.current = el as HTMLDivElement;
+        }}
+      />
       {alertStore.data.grids.map((grid) => (
         <Grid
           key={`${grid.labelName}/${grid.labelValue}`}

ui/src/Components/NavBar/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect, useCallback } from "react";
+import React, { FC, useState, useEffect, useCallback, useRef } from "react";
 
 import { reaction } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -32,7 +32,8 @@ const NavBar: FC<{
 
   const context = React.useContext(ThemeContext);
 
-  const { ref, height } = useDimensions({});
+  const ref = useRef<HTMLElement>();
+  const { observe, height } = useDimensions({});
 
   const updateBodyPaddingTop = useCallback(
     (idle) => {
@@ -102,7 +103,10 @@ const NavBar: FC<{
         exit
       >
         <nav
-          ref={ref}
+          ref={(el) => {
+            observe(el as HTMLElement);
+            ref.current = el as HTMLElement;
+          }}
           className={`navbar navbar-expand navbar-dark p-1 bg-primary-transparent d-flex ${
             fixedTop ? "fixed-top" : "w-100"
           } align-items-start`}