Start implementing workflow step form behaviour

src/pages/approval-workflows/index.tsx

@@ -145,9 +145,9 @@ export default function ApprovalWorkflows() {
             cell: ({ row }: { row: { original: ApprovalWorkflow } }) => {
                 return (
                     <div className="flex gap-4">
-                        <div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
+                        <button data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteApprovalWorkflow(row.original.id, row.original.name)}>
                             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
-                        </div>
+                        </button>
                         <Link data-tip="Edit" href={`/approval-workflows/${row.original.id}`} className="cursor-pointer tooltip">
                             <FaRegEdit className="hover:text-mti-purple-light transition ease-in-out duration-300" />
                         </Link>