fixed form

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/MyForm.js

@@ -77,13 +77,13 @@ export const MyForm = () => {
           <TextField
             multiline
             rows={4}
-            {...register("testo", { required: true, maxLength: 20 })}
+            {...register("testo")}
             id="outlined-basic"
             label="messaggio"
             variant="outlined"
           />
           <TextField
-            {...register("autore", { pattern: /^[A-Za-z]+$/i })}
+            {...register("autore")}
             id="outlined-basic"
             label="da"
             variant="outlined"

src/index.js

@@ -1,3 +1,4 @@
+import DeleteIcon from "@mui/icons-material/Delete";
 import "./App.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -38,6 +39,11 @@ export function CheckboxListSecondary({ messaggi, onChecked }) {
         return (
           <ListItem
             key={m.timestamp}
+            primaryAction={
+              <Button variant="outlined" startIcon={<DeleteIcon />}>
+                Delete
+              </Button>
+            }
             secondaryAction={
               <Checkbox
                 edge="end"