Created helper function to convert mutable refs from useRef into element refs for the ref prop

src/utils/InfoTooltip.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Placement } from '@popperjs/core';
+import { mutableRefToElementRef } from './helpers/components';
 
 type InfoTooltipProps = PropsWithChildren<{
   className?: string;
@@ -10,14 +11,11 @@ type InfoTooltipProps = PropsWithChildren<{
 }>;
 
 export const InfoTooltip: FC<InfoTooltipProps> = ({ className = '', placement, children }) => {
-  const ref = useRef<HTMLSpanElement | null>();
-  const refCallback = (el: HTMLSpanElement) => {
-    ref.current = el;
-  };
+  const ref = useRef<HTMLSpanElement | undefined>();
 
   return (
     <>
-      <span className={className} ref={refCallback}>
+      <span className={className} ref={mutableRefToElementRef(ref)}>
         <FontAwesomeIcon icon={infoIcon} />
       </span>
       <UncontrolledTooltip target={(() => ref.current) as any} placement={placement}>{children}</UncontrolledTooltip>

src/utils/helpers/components.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject, Ref } from 'react';
+
+export const mutableRefToElementRef = <T>(ref: MutableRefObject<T | undefined>): Ref<T> => (el) => {
+  ref.current = el ?? undefined; // eslint-disable-line no-param-reassign
+};