pl-fe: update dep

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/status.tsx

@@ -311,7 +311,7 @@ const Status: React.FC<IStatus> = (props) => {
     };
 
     return (
-      <HotKeys handlers={minHandlers} attach={node.current || undefined}>
+      <HotKeys handlers={minHandlers} attachRef={node}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
@@ -348,7 +348,7 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   return (
-    <HotKeys handlers={handlers} data-testid='status' attach={node.current || undefined}>
+    <HotKeys handlers={handlers} data-testid='status' attachRef={node}>
       <div
         className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}

packages/pl-fe/src/components/tombstone.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Text from 'pl-fe/components/ui/text';
@@ -13,13 +13,15 @@ interface ITombstone {
 
 /** Represents a deleted item. */
 const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown, deleted }) => {
+  const node = useRef<HTMLDivElement>(null);
+
   const handlers = {
     moveUp: () => onMoveUp?.(id),
     moveDown: () => onMoveDown?.(id),
   };
 
   return (
-    <HotKeys handlers={handlers}>
+    <HotKeys handlers={handlers} attachRef={node}>
       <div className='h-16'>
         <div
           className='focusable flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center dark:border-gray-800'