diff --git a/web/app/components/base/portal-to-follow-elem/index.spec.tsx b/web/app/components/base/portal-to-follow-elem/index.spec.tsx
index 74790d7846..80cd1ddd76 100644
--- a/web/app/components/base/portal-to-follow-elem/index.spec.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.spec.tsx
@@ -14,7 +14,7 @@ describe('PortalToFollowElem', () => {
 
       expect(() => {
         render(
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>,
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>,
         )
       }).toThrow('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
 
@@ -25,7 +25,7 @@ describe('PortalToFollowElem', () => {
       expect(() => {
         render(
           <PortalToFollowElem>
-            <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
+            <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
           </PortalToFollowElem>,
         )
       }).not.toThrow()
@@ -36,7 +36,7 @@ describe('PortalToFollowElem', () => {
     test('should render children correctly', () => {
       const { getByText } = render(
         <PortalToFollowElem>
-          <PortalToFollowElemTrigger>Trigger Text </PortalToFollowElemTrigger>
+          <PortalToFollowElemTrigger>Trigger Text</PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
       expect(getByText('Trigger Text')).toBeInTheDocument()
@@ -46,7 +46,7 @@ describe('PortalToFollowElem', () => {
       const { getByRole } = render(
         <PortalToFollowElem>
           <PortalToFollowElemTrigger asChild >
-            <button>Button Trigger </button>
+            <button>Button Trigger</button>
           </PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
@@ -59,8 +59,8 @@ describe('PortalToFollowElem', () => {
     test('should not render content when closed', () => {
       const { queryByText } = render(
         <PortalToFollowElem open={false} >
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
+          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -71,7 +71,7 @@ describe('PortalToFollowElem', () => {
       const { getByText } = render(
         <PortalToFollowElem open={true} >
           <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Popup Content </PortalToFollowElemContent>
+          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -85,8 +85,8 @@ describe('PortalToFollowElem', () => {
 
       const { getByText } = render(
         <PortalToFollowElem onOpenChange={handleOpenChange} >
-          <PortalToFollowElemTrigger>Hover Me </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent > Content </PortalToFollowElemContent>
+          <PortalToFollowElemTrigger>Hover Me</PortalToFollowElemTrigger>
+          <PortalToFollowElemContent>Content</PortalToFollowElemContent>
         </PortalToFollowElem>,
       )
 
@@ -104,8 +104,8 @@ describe('PortalToFollowElem', () => {
       const useFloatingMock = jest.spyOn(require('@floating-ui/react'), 'useFloating')
 
       render(
-        <PortalToFollowElem placement="top-start" >
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
+        <PortalToFollowElem placement='top-start' >
+          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
         </PortalToFollowElem>,
       )
 
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index 55891bd8d2..abecaf62a2 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -41,6 +41,7 @@ export function usePortalToFollowElem({
 }: PortalToFollowElemOptions = {}) {
   const [localOpen, setLocalOpen] = useState(false)
   const open = controlledOpen ?? localOpen
+  const isControlled = controlledOpen !== undefined
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setLocalOpen(newOpen)
     setControlledOpen?.(newOpen)
@@ -72,10 +73,10 @@ export function usePortalToFollowElem({
 
   const hover = useHover(context, {
     move: false,
-    enabled: open == null,
+    enabled: !isControlled,
   })
   const focus = useFocus(context, {
-    enabled: open == null,
+    enabled: !isControlled,
   })
   const dismiss = useDismiss(context)
   const role = useRole(context, { role: 'tooltip' })
@@ -85,10 +86,10 @@ export function usePortalToFollowElem({
   const interactionsArray = useMemo(() => {
     const result = [hover, focus, dismiss, role]
 
-    if (!setControlledOpen)
+    if (!isControlled)
       result.push(click)
     return result
-  }, [setControlledOpen, hover, focus, dismiss, role, click])
+  }, [isControlled, hover, focus, dismiss, role, click])
   const interactions = useInteractions(interactionsArray)
 
   return React.useMemo(
@@ -148,7 +149,7 @@ export const PortalToFollowElemTrigger = (
       context.getReferenceProps({
         ref,
         ...props,
-        ...children.props,
+        ...(children.props || {}),
         'data-state': context.open ? 'open' : 'closed',
       } as React.HTMLProps<HTMLElement>),
     )