Reset date picker field

const [date, setDate] = useState<Date | undefined>();

  const setNewDate = (value: Date | undefined) => {
    setDate(value);
  };

  function setValue() {
    const d = new Date();
    d.setDate(d.getDate() - 7);
    setDate(d);
  }

  function clearValue() {
    setDate(undefined);
  }

<GoabxFormItem label="Date Picker">
        <GoabxDatePicker
          name="item"
          value={date}
          onChange={(e) => setNewDate(e.value as Date)}
          mb="xl"
        />
      </GoabxFormItem>

      <GoabButtonGroup mt="xs" alignment="start">
        <GoabxButton onClick={setValue}>
          Set Value
        </GoabxButton>
        <GoabxButton onClick={clearValue}>Clear Value</GoabxButton>
      </GoabButtonGroup>

item: Date | undefined = undefined;

  onChange(event: { value: Date | undefined }): void {
    this.item = event.value;
  }

  setValue(): void {
    const d = new Date();
    d.setDate(d.getDate() - 7);
    this.item = d;
  }

  clearValue(): void {
    this.item = undefined;
  }

<goabx-form-item label="Date Picker">
  <goabx-date-picker
    (onChange)="onChange($event)"
    name="item"
    [value]="item">
  </goabx-date-picker>
</goabx-form-item>

<goab-button-group alignment="start" mt="xs">
  <goabx-button (onClick)="setValue()">Set Value</goabx-button>
  <goabx-button (onClick)="clearValue()">Clear Value</goabx-button>
</goab-button-group>

const datePicker = document.getElementById("date-picker");
const setValueBtn = document.getElementById("set-value-btn");
const clearValueBtn = document.getElementById("clear-value-btn");

datePicker.addEventListener("_change", (e) => {
  console.log("Date changed:", e.detail.value);
});

setValueBtn.addEventListener("_click", () => {
  const d = new Date();
  d.setDate(d.getDate() - 7);
  datePicker.setAttribute("value", d.toISOString());
});

clearValueBtn.addEventListener("_click", () => {
  datePicker.removeAttribute("value");
});

<goa-form-item version="2" label="Date Picker">
  <goa-date-picker version="2" id="date-picker" name="item"></goa-date-picker>
</goa-form-item>

<goa-button-group alignment="start" mt="xs">
  <goa-button version="2" id="set-value-btn">Set Value</goa-button>
  <goa-button version="2" id="clear-value-btn">Clear Value</goa-button>
</goa-button-group>