Multi Select

<FormField
              control={form.control}
              name="select_your_framework"
              render={({ field }) => {
                const multiSelectValue = Array.isArray(field.value) ? field.value : []

                return (
                <FormItem className="w-full">
                  <FormLabel>Select your framework</FormLabel>
                  <FormControl>
                    <MultiSelector
                      values={multiSelectValue}
                      onValuesChange={(newValues) => {
                        field.onChange(newValues)
                        form.setValue(field.name, newValues, {
                          shouldValidate: true,
                          shouldDirty: true,
                          shouldTouch: true
                        })
                      }}
                      className="w-full"
                    >
                      <MultiSelectorTrigger>
                        <MultiSelectorInput placeholder="Select frameworks" />
                      </MultiSelectorTrigger>
                      <MultiSelectorContent>
                      <MultiSelectorList>
                        <MultiSelectorItem value={"React"}>{"React"}</MultiSelectorItem>
                        <MultiSelectorItem value={"Vue"}>{"Vue"}</MultiSelectorItem>
                        <MultiSelectorItem value={"Svelte"}>{"Svelte"}</MultiSelectorItem>
                      </MultiSelectorList>
                      </MultiSelectorContent>
                    </MultiSelector>
                  </FormControl>
                  <FormDescription>Select multiple options.</FormDescription>
                  <FormMessage />
                </FormItem>
                )
              }}
            />