My button gives this error. Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Question

ı am tried to develop a button which is ı used everywhere. I got this type of error how can ı fix it?

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

    import React from "react";
import AlknLoading from "./AlknLoading";

export default function AlknButton({
  type,
  className,
  loadingstyle,
  loading,
  placeholder,
  children,
  ...props
}) {
  let settype = "";
  switch (type) {
    case "primary":
      settype = "AlknPrimaryBtn";
      break;

    case "secondary":
      settype = "AlknSecondaryBtn";
      break;

    case "AlknKoyuGri":
      settype = "AlknKoyuGriBtn";
      break;

    case "AlknAcikGri":
      settype = "AlknAcikGriBtn";
      break;

    case "AlknAcikSari":
      settype = "AlknAcikSariBtn";
      break;

    default:
      settype = "alkanlar-default-button";
  }

  return (
    <button {...props} className={`${settype} ${className}`}>
      {loading ? (
        <AlknLoading className={loadingstyle} />
      ) : placeholder ? (
        <span>{placeholder}</span>
      ) : (
        children
      )}
    </button>
  );
}