Customized ProgressView in a SwiftUI widget

I’m making an attempt so as to add a linear ProgressView to a SwiftUI Widget that counts up over time and makes use of a LinearGradient as an alternative of a stable shade for the progress bar.

First I attempted utilizing the built-in ProgressView with a ProgressViewStyle however I discover that it stops counting up after I add the ProgressViewStyle:

ProgressView(
    timerInterval: (.now...endDate),
    countsDown: false,
    label: {EmptyView()},
    currentValueLabel: {
        EmptyView()
    }
)
.progressViewStyle(
    GradientLinearProgressViewStyle(
        gradient: LinearGradient(
            colours: [.red, .green],
            startPoint: .main,
            endPoint: .trailing
        )
    )
)

In its place, I attempted masking a LinearGradient with a ProgressView, which does animate accurately:

Capsule()
    .fill(
        LinearGradient(
            colours: [.green.opacity(0.3), .red],
            startPoint: .main,
            endPoint: .trailing
        )
    )
    .masks(alignment: .main) {
        ProgressView(
            timerInterval: (.now...endDate),
            countsDown: false,
            label: { EmptyView() },
            currentValueLabel: { EmptyView() }
        )
        .scaleEffect(y: 7, anchor: .heart)
    }

This strategy restores the animation, nevertheless it introduces an undesirable gradient background behind the progress bar like so:

Is there a correct or advisable technique to create a customized linear ProgressView with a gradient in a SwiftUI widget with out breaking the timer-based animation or introducing background artifacts?