I'm trying to implement a form with validation:

import React from 'react';

import { useForm } from "react-hook-form";
import axios, {AxiosResponse} from "axios";
import {Box, Button, Container, Grid, Typography} from "@material-ui/core";
import TextField from '@material-ui/core/TextField';

export async function postTicket(data: TicketDTO): Promise<AxiosResponse<TicketDTO[]>> {
  return await axios.post<TicketDTO[]>(
      `http://localhost:8080/api/support/tickets/create`
  );
}

export interface TicketDTO {
  title?: string;
}

export default function OpenTicket(props: any) {
  const {
      register,
      handleSubmit,
      formState: { errors }
  } = useForm<TicketDTO>();

  const onSubmit = async (data: TicketDTO) => {
      try {
          await postTicket(data);
      } catch (err) {
          console.log(err);
      }
  };

  return (
      <Container>
           <form onSubmit={handleSubmit(onSubmit)}>
               <TextField
                   id="outlined-full-width"
                   label="Name"
                   {...register("title", { required: true, maxLength: 20 })}
                   placeholder="Placeholder"
                   helperText="Full width!"
                   fullWidth
                   margin="normal"
                   InputLabelProps={{
                       shrink: true,
                   }}
                   variant="outlined"
               />

              <Button
                  variant="contained"
                  color="primary"
                  size="small"
              >
                  Submit
              </Button>
          </form>
      </Container>
  );
}

Sandbox: https://stackblitz.com/edit/react-ts-4pnf8b?file=Hello.tsx

But when I click submit button nothing happens. I would like to use the Materia-ui default validation messages? Do you know where I'm wrong?