form.setFieldValue won't rerender a component?

const { fieldContext, formContext, useFieldContext, useFormContext } =
  createFormHookContexts();

const { useAppForm } = createFormHook({
  fieldComponents: {
    Input: FormInput,
    Image: FormImageUpload,
    Textarea: FormTextarea,
    Select: FormSelect,
    Checkbox: FormCheckbox,
    Switch: FormSwitch,
  },
  formComponents: {},
  fieldContext,
  formContext,
});

export { useAppForm, useFieldContext, useFormContext };

const validFrom = form.state.values.valid_from;
  const validUntil = form.state.values.valid_until;

  const handleDateSelect = (range: DateRange | undefined) => {
    console.log("Selected range:", form.state.values.valid_until);
    const from = range?.from ? startOfDay(range.from) : undefined;
    let to = range?.to ? endOfDay(range.to) : undefined;

    if (from && !to) {
      to = endOfDay(from);
    }

    if (from && to && isSameDay(from, to)) {
      to = endOfDay(from);
    }

    // Update both fields
    form.setFieldValue("valid_from", from?.toISOString());
    form.setFieldValue("valid_until", to ? to.toISOString() : "");
  };

  const selectedRange: DateRange | undefined = React.useMemo(
    () => ({
      from: validFrom ? new Date(validFrom) : undefined,
      to: validUntil ? new Date(validUntil) : undefined,
    }),
    [validFrom, validUntil],
  );

 <Calendar
   mode="range"
   defaultMonth={selectedRange?.from}
   selected={selectedRange}
   onSelect={handleDateSelect}
   numberOfMonths={1}
  />