Extracted InfoTooltip to its own component

src/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx

@@ -1,8 +1,6 @@
-import { ChangeEvent, FC, useRef } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
-import { UncontrolledTooltip } from 'reactstrap';
+import { ChangeEvent, FC } from 'react';
 import Checkbox from '../../utils/Checkbox';
+import { InfoTooltip } from '../../utils/InfoTooltip';
 
 interface ShortUrlFormCheckboxGroupProps {
   checked?: boolean;
@@ -10,23 +8,6 @@ interface ShortUrlFormCheckboxGroupProps {
   infoTooltip?: string;
 }
 
-const InfoTooltip: FC<{ tooltip: string }> = ({ tooltip }) => {
-  const ref = useRef<HTMLElement | null>();
-
-  return (
-    <>
-      <span
-        ref={(el) => {
-          ref.current = el;
-        }}
-      >
-        <FontAwesomeIcon icon={infoIcon} />
-      </span>
-      <UncontrolledTooltip target={(() => ref.current) as any} placement="right">{tooltip}</UncontrolledTooltip>
-    </>
-  );
-};
-
 export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
   { children, infoTooltip, checked, onChange },
 ) => (
@@ -34,6 +15,6 @@ export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
     <Checkbox inline checked={checked} className={infoTooltip ? 'mr-2' : ''} onChange={onChange}>
       {children}
     </Checkbox>
-    {infoTooltip && <InfoTooltip tooltip={infoTooltip} />}
+    {infoTooltip && <InfoTooltip placement="right">{infoTooltip}</InfoTooltip>}
   </p>
 );