Dialog re renders twice

[SiriusShift]

I encountered a bug, when I have a select inside of a dialog, the dialog renders twice because when the data you are mapping is large. The dialog blinks like rendering twice. This is my code. How can I fix it? The error is in the formfield name ="category". The category has a array of objects that has length of 36

        <FormProvider {...form}>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            <div className="flex gap-4 flex-col">
              <div
                className={`${active === "All" ? "order-1" : ""} space-y-4`}
              >
                <div className="grid grid-cols-2 gap-5">
                  <FormField
                    name="category"
                    control={control}
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Category</FormLabel>
                        <FormControl>
                          <Select
                            onValueChange={(value) => {
                              // Find the selected category object based on the value (category name)
                              const selectedCategory = categories?.find(
                                (category) => category.name === value
                              );
                              field.onChange(selectedCategory); // Set the entire object in the form state
                            }}
                            value={field.value?.name} // Set the category name as the value for display
                          >
                            <SelectTrigger className="capitalize">
                              {/* Display the name of the selected category */}
                              <SelectValue placeholder="Select a category">
                                {field.value?.name || "Select a category"}
                              </SelectValue>
                            </SelectTrigger>
                            <SelectContent className="max-h-[200px]">
                              {categories?.map((category) => (
                                <SelectItem
                                  key={category.id}
                                  value={category.name}
                                >
                                  {category.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    name="amount"
                    control={control}
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Amount</FormLabel>
                        <FormControl>
                          <Input
                            {...field}
                            min={0}
                            type="number"
                            step="0.01"
                            placeholder="Enter amount"
                            className="input-class text-sm"
                            disabled={active === "All" && !watch("source")}
                            onChange={(e) => {
                              const value = Number(e.target.value);
                              const balance = watch("source")?.balance;

                              if (
                                active === "All" &&
                                balance &&
                                value > balance
                              ) {
                                toast.error("Insufficient balance");
                                e.target.value = balance; // Reset to the maximum allowed value
                              } else {
                                numberInput(e, field); // Proceed with normal input handling
                              }
                            }}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
                <FormField
                  name="description"
                  control={control}
                  render={({ field }) => (
                    <FormItem className="flex flex-col">
                      <FormLabel>Description</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                          placeholder="Enter description"
                          className="input-class text-sm"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

            </div>

            {/* Footer Buttons */}
            <AlertDialogFooter>
              <AlertDialogAction asChild>
                <Button type="submit" disabled={!isValid}>
                  {mode === "edit" ? "Update" : "Add"}
                </Button>
              </AlertDialogAction>

              <AlertDialogCancel asChild>
                <Button
                  type="button"
                  // onClick={() => form.reset()}
                  variant="secondary"
                >
                  Close
                </Button>
              </AlertDialogCancel>
            </AlertDialogFooter>
          </form>
        </FormProvider>