Added ref support in Radio.Item (#2496)

Author: josephmathew900

src/components/Radio/Item.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import classnames from "classnames";
 import PropTypes from "prop-types";
@@ -7,37 +7,42 @@ import Label from "components/Label";
 import { useId } from "hooks";
 import { hyphenize } from "utils";
 
-const Item = ({
-  name = "",
-  label = "",
-  className = "",
-  labelProps,
-  dataCy = "",
-  ...otherProps
-}) => {
-  const id = useId(otherProps.id);
+const Item = forwardRef(
+  (
+    {
+      name = "",
+      label = "",
+      className = "",
+      labelProps,
+      dataCy = "",
+      ...otherProps
+    },
+    ref
+  ) => {
+    const id = useId(otherProps.id);
 
-  return (
-    <div className={classnames(["neeto-ui-radio__item", className])}>
-      <input
-        {...{ id, name }}
-        className="neeto-ui-radio"
-        data-cy={dataCy || `${hyphenize(label)}-radio-input`}
-        type="radio"
-        {...otherProps}
-      />
-      {label && (
-        <Label
-          data-cy={dataCy || `${hyphenize(label)}-radio-label`}
-          htmlFor={id}
-          {...labelProps}
-        >
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-};
+    return (
+      <div className={classnames(["neeto-ui-radio__item", className])}>
+        <input
+          {...{ id, name, ref }}
+          className="neeto-ui-radio"
+          data-cy={dataCy || `${hyphenize(label)}-radio-input`}
+          type="radio"
+          {...otherProps}
+        />
+        {label && (
+          <Label
+            data-cy={dataCy || `${hyphenize(label)}-radio-label`}
+            htmlFor={id}
+            {...labelProps}
+          >
+            {label}
+          </Label>
+        )}
+      </div>
+    );
+  }
+);
 
 Item.displayName = "Radio.Item";