Form validation is not working with TextField from fast-foundation

Question

I've been trying to create a custom element - a form with a required text field. For this I've used the TextField class and template from fast-foundation, fluent button and my template for the custom element looks like this -

<form onsubmit="event.preventDefault();console.log('Submitting the form');">
        <text-field
        required
        value=${(x) => x.first}
        @change=${(x, c) => {x.first = (<TextField>c.event.target).value;}}>
        ${(x) => x.firstLabel}</text-field>
    <action-button appearance="accent" type="submit">Submit</action-button>
</form>

The action-button just extends fluentButton. Now when I click on the button to check the validation message for the empty input, I'm getting an error on the browser - An invalid form control with name='' is not focusable.

Looks like the browser is not able to focus on the input element to show the validation message beside the box. Should I have done anything extra here for this to work?