Function components cannot be given refs. How to use React.forwarRef() without errors

Question

pretty straightforward question, but at current I get console errors saying "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

Anytime I try to add forwardRef to my code (in any way that I've tried), my code refuses to compile, can anyone suggestion the right implementation of forwardRef with my code? TIA!

const CommodityCodeLookupAttribute = ({
  attribute: productLookupAttribute,
  onChange,
  ...otherProps
}: Props) => {

  const { object } = useFormObjectContext();

  const ccceAttribute = object.attributeCollection.find(isCcceResultAttribute);

  if (!ccceAttribute) {
    return null;
  }

  const findGoodsBtnRef = React.useRef();

  const handleOnKeyDown = (event) => {
    if (event.keyCode === "13") {
      findGoodsBtnRef.current.click();
    }
  };

  return (
    <>
      <StringAttributeDefault
        attribute={productLookupAttribute}
        onKeyDown={handleOnKeyDown}
        {...otherProps}
      />

      <CcceAttribute attribute={ccceAttribute} ref={findGoodsBtnRef} />
    </>
  );
};