fix: prop for multiple needs to change to be valid

Author: aranlucas

src/Chip/Chip.stories.tsx

@@ -25,9 +25,9 @@ export const Primary: Story = {
   },
 };
 
-export const ChipGroup: StoryGroup = {
+export const ChipGroupSingle: StoryGroup = {
   render: (args) => (
-    <Chip.Group multiple {...args}>
+    <Chip.Group {...args}>
       <Chip.Item value="react">React</Chip.Item>
       <Chip.Item value="ng">Angular</Chip.Item>
       <Chip.Item value="svelte">Svelte</Chip.Item>
@@ -37,6 +37,28 @@ export const ChipGroup: StoryGroup = {
   args: {
     name: "test",
   },
+  parameters: {
+    form: {
+      defaultValues: {
+        test: "react",
+      },
+    },
+  },
+};
+
+export const ChipGroupMultiple: StoryGroup = {
+  render: (args) => (
+    <Chip.Group {...args}>
+      <Chip.Item value="react">React</Chip.Item>
+      <Chip.Item value="ng">Angular</Chip.Item>
+      <Chip.Item value="svelte">Svelte</Chip.Item>
+      <Chip.Item value="vue">Vue</Chip.Item>
+    </Chip.Group>
+  ),
+  args: {
+    name: "test",
+    multiple: true,
+  },
   parameters: {
     form: {
       defaultValues: {

src/Chip/Chip.tsx

@@ -11,8 +11,10 @@ import {
 
 export type ChipProps<T extends FieldValues> = UseControllerProps<T> &
   Omit<$ChipProps, "value" | "defaultValue">;
-export type ChipGroupProps<T extends FieldValues> = UseControllerProps<T> &
-  Omit<$ChipGroupProps, "value" | "defaultValue">;
+export type ChipGroupProps<
+  T extends FieldValues,
+  V extends boolean
+> = UseControllerProps<T> & Omit<$ChipGroupProps<V>, "value" | "defaultValue">;
 
 export function Chip<T extends FieldValues>({
   name,
@@ -47,18 +49,18 @@ export function Chip<T extends FieldValues>({
   );
 }
 
-Chip.Group = <T extends FieldValues>({
+Chip.Group = <T extends FieldValues, V extends boolean>({
   name,
   control,
   defaultValue,
   rules,
   shouldUnregister,
   onChange,
   ...props
-}: ChipGroupProps<T>) => {
+}: ChipGroupProps<T, V>) => {
   const {
-    field: { value, onChange: fieldOnChange, ...field },
-  } = useController({
+    field: { value, onChange: fieldOnChange, ref, ...field },
+  } = useController<T>({
     name,
     control,
     defaultValue,
@@ -67,7 +69,7 @@ Chip.Group = <T extends FieldValues>({
   });
 
   return (
-    <$Chip.Group
+    <$Chip.Group<V>
       value={value}
       onChange={(e) => {
         fieldOnChange(e);