Unsure why sorting is not working

 const columnHelper = createColumnHelper<Visa>();
  const columns = [
    columnHelper.accessor('email', {
      cell: (info) => info.getValue(),
      header: () => <span>Visa ID</span>,
    }),
    columnHelper.accessor(
      (row) => {
        const username = row.credentials ? row.credentials[0].username : '';
        return username;
      },
      {
        cell: (info) => info.getValue(),
        id: 'username',
        header: () => <span>Username</span>,
      },
    ),
    columnHelper.accessor(
      (row) => {
        const hostname = row.credentials ? row.credentials[0].hostnames[0] : '';
        return hostname;
      },
      {
        cell: (info) => info.getValue(),
        id: 'hostname',
        header: () => <span>Hostname</span>,
      },
    ),
    columnHelper.accessor('known_set_size', {
      cell: (info) => info.getValue(),
      header: () => <span>Known set</span>,
    }),
  ];