diff --git a/src/js/components/Widgets/FriendsOnlyIndicator.jsx b/src/js/components/Widgets/FriendsOnlyIndicator.jsx
index 2cbdac800..6543d9039 100644
--- a/src/js/components/Widgets/FriendsOnlyIndicator.jsx
+++ b/src/js/components/Widgets/FriendsOnlyIndicator.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { ReactSVG } from 'react-svg';
@@ -11,66 +11,69 @@ import normalizedImagePath from '../../common/utils/normalizedImagePath';
 const groupIcon = '../../../img/global/svg-icons/group-icon.svg';
 const publicIcon = '../../../img/global/svg-icons/public-icon.svg';
 
-export default class FriendsOnlyIndicator extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {};
-  }
 
-  render () {
-    renderLog('FriendsOnlyIndicator');  // Set LOG_RENDER_EVENTS to log all renders
-    let { isFriendsOnly } = this.props;
-    if (isFriendsOnly === undefined) {
-      isFriendsOnly = true;
-    }
+export default function FriendsOnlyIndicator({ isFriendsOnly }){
+  renderLog('FriendsOnlyIndicator');  // Set LOG_RENDER_EVENTS to log all renders
+  
+  let labelText = '';
+  let visibilityIcon = '';
 
-    let labelText = '';
-    let visibilityIcon = '';
-    if (isFriendsOnly) {
-      labelText = 'This is only visible to We Vote friends.';
-      visibilityIcon = (
-        <ReactSVG
-          src={normalizedImagePath(groupIcon)}
-          // beforeInjection={(svg) => svg.setAttribute('style',
-          //   { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
-          beforeInjection={(svg) => {
-            // Background color not working and needs to be fixed
-            // svg.setAttribute('backgroundColor', '#fff');
-            // svg.setAttribute('borderRadius', '3px');
-            svg.setAttribute('fill', '#555');
-          }}
-          alt="Visible to Friends Only"
-        />
-      );
-    } else {
-      labelText = 'This is visible to the public.';
-      visibilityIcon = (
-        <ReactSVG
-          src={normalizedImagePath(publicIcon)}
-          // beforeInjection={(svg) => svg.setAttribute('style',
-          //   { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
-          beforeInjection={(svg) => {
-            // Background color not working and needs to be fixed
-            // svg.setAttribute('backgroundColor', '#fff');
-            // svg.setAttribute('borderRadius', '3px');
-            svg.setAttribute('fill', '#555');
-          }}
-          alt="Visible to Public"
-        />
-      );
-    }
+  if (isFriendsOnly === undefined) {
+    isFriendsOnly = true;
+  }
 
-    const tooltip = isMobileScreenSize() ? (<span />) : (
-      <Tooltip id="tooltip">{labelText}</Tooltip>
+  if (isFriendsOnly) {
+    labelText = 'This is only visible to We Vote friends.';
+    visibilityIcon = (
+      <ReactSVG
+        src={normalizedImagePath(groupIcon)}
+        // beforeInjection={(svg) => svg.setAttribute('style',
+        //   { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
+        beforeInjection={(svg) => {
+          // Background color not working and needs to be fixed
+          // svg.setAttribute('backgroundColor', '#fff');
+          // svg.setAttribute('borderRadius', '3px');
+          svg.setAttribute('fill', '#555');
+        }}
+        alt="Visible to Friends Only"
+      />
     );
-
-    return (
-      <OverlayTrigger placement="top" overlay={tooltip}>
-        <PublicFriendsIndicator>{visibilityIcon}</PublicFriendsIndicator>
-      </OverlayTrigger>
+  } else {
+    labelText = 'This is visible to the public.';
+    visibilityIcon = (
+      <ReactSVG
+        src={normalizedImagePath(publicIcon)}
+        // beforeInjection={(svg) => svg.setAttribute('style',
+        //   { backgroundColor: '#fff', borderRadius: '3px', fill: '#555', width: '16px', height: '16px', display: 'flex', verticalAlign: 'unset' })}
+        beforeInjection={(svg) => {
+          // Background color not working and needs to be fixed
+          // svg.setAttribute('backgroundColor', '#fff');
+          // svg.setAttribute('borderRadius', '3px');
+          svg.setAttribute('fill', '#555');
+        }}
+        alt="Visible to Public"
+      />
     );
   }
-}
+
+  const tooltip = isMobileScreenSize() ? (<span />) : (
+    <Tooltip id="tooltip">{labelText}</Tooltip>
+  );
+
+  const FriendsOnlyOverlayTrigger = React.forwardRef((props, ref) => (
+    <OverlayTrigger ref={ref} placement="top" overlay={tooltip}>
+      {props.children}
+    </OverlayTrigger>
+  ));
+
+  return (
+    <FriendsOnlyOverlayTrigger>
+      <PublicFriendsIndicator>{visibilityIcon}</PublicFriendsIndicator>
+    </FriendsOnlyOverlayTrigger>
+  );
+
+};
+
 FriendsOnlyIndicator.propTypes = {
   isFriendsOnly: PropTypes.bool,
 };
@@ -80,4 +83,4 @@ const PublicFriendsIndicator = styled('span')`
   display: inline-block;
   margin-top: -5px;
   height: 18px;
-`;
+`;
\ No newline at end of file