fix highlightedtext ref forward

src/renderer/src/components/HighlightedText.tsx

@@ -1,14 +1,15 @@
 import type { CSSProperties, HTMLAttributes } from 'react';
-import { memo } from 'react';
+import { memo, forwardRef } from 'react';
 
 import { primaryTextColor } from '../colors';
 import styles from './HighlightedText.module.css';
 
 export const highlightedTextStyle: CSSProperties = { textDecorationColor: primaryTextColor };
 
-function HighlightedText({ children, style, ...props }: HTMLAttributes<HTMLButtonElement>) {
+// eslint-disable-next-line react/display-name
+const HighlightedText = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(({ children, style, ...props }, ref) => (
   // eslint-disable-next-line react/jsx-props-no-spreading
-  return <button type="button" {...props} className={styles['button']} style={{ ...highlightedTextStyle, ...style }}>{children}</button>;
-}
+  <button ref={ref} type="button" {...props} className={styles['button']} style={{ ...highlightedTextStyle, ...style }}>{children}</button>
+));
 
 export default memo(HighlightedText);