sersavan / shadcn-multi-select-component Goto Github PK

 <FormField
            control={form.control}
            name="sizes"
            render={({ field }) => (
              <FormItem>
                {/* <FormLabel>Select size</FormLabel> */}
                <FormControl>
                  <MultiSelectFormField
                    options={sizesList}
                    defaultValue={field.value}
                    onValueChange={field.onChange}
                    placeholder="Select sizes"
                    className="h-30 max-w-[300px] shadow-none"
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

      Please help me to customize this component

    const toggleOption = (value: string) => {
      if (selectedValuesSet.current.has(value)) {
        selectedValuesSet.current.delete(value);
        setSelectedValues(selectedValues.filter((v) => v !== value));
      } else {
        selectedValuesSet.current.add(value);
        setSelectedValues([...selectedValues, value]);
      }
      onValueChange(Array.from(selectedValuesSet.current));
    };

<Form {...form}>
              <form
                onSubmit={form.handleSubmit(onHandleSubmit)}
                className="space-y-4"
              >
                <FormField
                  control={form.control}
                  name="authors"
                  render={({ field: { ...field } }) => (
                    <FormItem className="mb-5">
                      <FormLabel>Author</FormLabel>
                      <MultiSelect
                        selected={field.value}
                        options={authorsData}
                        {...field} />
                    </FormItem>
                  )}
                />
                <Button type="submit" className="w-full">
                  Continue
                </Button>
              </form>
            </Form>
            ```