Input of BRL with shadn/ui and react-hook-form with placeholder and currency

gistfile1.txt

                <FormField
                  control={form.control}
                  name="price"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Preço</FormLabel>
                      <FormControl>
                        <Input
                          type="text"  // Changed from "number" to "text" for better currency formatting
                          placeholder="R$ 10,00"
                          {...field}
                          value={field.value ?
                            (field.value / 100).toLocaleString("pt-BR", {
                              style: "currency",
                              currency: "BRL",
                            }) :
                            ""
                          }
                          onChange={(e) => {
                            const rawValue = e.target.value.replace(/\D/g, '');
                            const valueInCents = rawValue ? parseInt(rawValue) : 0;
                            field.onChange(valueInCents);
                          }}
                          onBlur={() => {
                            // Ensure proper formatting when leaving the field
                            if (field.value) {
                              field.onChange(field.value);
                            }
                          }}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />