Data goes back to default values when the event that changes it is invoked

Question

I have a blazor component that displays some data and filters this data based on some button clicks.

These buttons represent a specific date and when they are clicked, a Syncfusion date range component is populated and updated by the dates behind these buttons.

The issue is that when I click these buttons, the date on this date range component changes, but immediately goes back to the default date, like this:

This is the code behind the button click:

private async Task FilterByDate(MouseEventArgs e, DateTimeOffset? startDate)
{
    SetDateRange(startDate);
    await OnFilterButtonClicked.InvokeAsync((this.StartDate, this.EndDate));
    await GetData(); //gets the data that populates other parts of the page based on the changed date
}

private void SetDateRange(DateTimeOffset? startDate)
{
   this.StartDate = startDate.HasValue ? startDate.Value.Date : this.MinStartDate;
   this.EndDate = DateTimeOffset.Now.Date;
}

private async Task GetData()
{
   Data = await this.httpClient.GetAsync($"myendpoint/api?startDate={StartDate}&endDate={EndDate}");
}

This is the razor component that displays the button and date range control

<DateRangePicker StartDate="StartDate" EndDate="EndDate" />

<button type="button" @onclick="@(e => FilterByDate(e, today.StartOfDay()))" class="btn btn-brand">Today</button>

When I get the GetData() off, the issue is solved.

What exactly is going on and how do I solve this issue?