Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Пытаюсь создать функциональный компонент на основе <a> тега. Выдаёт ошибку из заголовка: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Изначально делал без forwardRef, но погуглив ошибку, пришёл к выводу, что надо писать так, но всё равно ошибка не уходит. Не понимаю, как правильно этот компонент реализовать? По сути это просто <a>, но с дополнительным параметром, на основании которого выводится один из вариантов тега

import React from "react";
import { forwardRef } from "react";

interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
  isLoading?: boolean;
}
export const Link: React.FC<LinkProps> = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ isLoading, children, ...attributes }, ref) => {    
    return isLoading ? (
      <a ref={ref} {...attributes}>{children}</a>
    ) : (
      <a {...attributes}>Loading...</a>
    );
  }
);


Ответы (0 шт):