Cypress check if the sort the grid by order

I am trying to sort images by order, i have the button new and old. the [data-cy="list-file"] is the wrap for all images and [data-cy=fileCard-list] represent each one image. I want after clicking the button old for example to be able the check with cypress if the sort is working perfectly.

import { sortFilteredComments } from './../../../../lib/vmr'; import loginData from '../../../fixtures/login.json';

/// <reference types='cypress' />
describe('upload multiple photos', () => {
  before(() => {
    cy.clearLocalStorageSnapshot();
  });

  beforeEach(() => {
    cy.restoreLocalStorage();
  });

  afterEach(() => {
    cy.saveLocalStorage();
  });

  it('login', () => {
     cy.get('[data-cy=projects-card-table]').contains('E2E-TEST').click();
cy.get('[data-cy="header-search-bar"]').click();
cy.wait(3000).get('[data-cy=file-order-old]').click();
cy.get('[data-cy="list-file"]').should('be.visible');
cy.get('[data-cy=each-item-file]').should('be.visible');   
  });
});

Here is the file with sort method

`import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { IFetchedFiles } from 'api';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { formatFullDate } from '~/lib/date';
import MimeIcon from '../../MimeIcon';
import { COLORS } from '~/lib/theme';

const useStyles = makeStyles(() => ({
  card: {
    backgroundColor: '#F1F3F3',
    height: '400px',
    width: '288px',
    margin: '8px'
  },
  cardMedia: {
    height: '200px',
    margin: '10px',
    cursor: 'pointer',
    position: 'relative'
  },
  cardMediaImgContain: {
    backgroundSize: 'contain'
  },
  excelTitle: {
    backgroundColor: COLORS.white,
    bottom: 0,
    color: 'black',
    fontSize: 14,
    fontWeight: 'bold',
    position: 'absolute',
    padding: 4,
    right: 0
  },
  group: {
    marginRight: 20
  },
  groupWrap: {
    display: 'flex',
    padding: '0px 10px'
  },
  projectLabel: {
    fontSize: 14,
    fontWeight: 'bold',
    marginBottom: '11px',
    padding: '0px 10px'
  },
  title: {
    fontSize: 14
  },
  titleWithMarginTop: {
    fontSize: 14,
    marginTop: 12
  },
  fileData: {
    fontSize: 14,
    fontWeight: 'bold'
  },
  fileDataMarginTop: {
    fontSize: 14,
    fontWeight: 'bold',
    marginTop: 12
  },
  iconsContainer: {
    display: 'flex',
    gap: '4px',
    padding: '4px'
  }
}));

const iconSize = 24;

interface IProps {
  file: IFetchedFiles['files'][number];
  organizationName: string;
  getImageUrl: () => any;
  imageMime: boolean;
  excelMime: boolean;
  pdfMime: boolean;
  tiffMime: boolean;
}

const FileCard: React.VFC<IProps> = ({
  file,
  organizationName,
  getImageUrl,
  imageMime,
  excelMime
}) => {
  const classes = useStyles();
  const { t, i18n } = useTranslation();
  const router = useRouter();

  return (
    <Grid **data-cy='each-item-file'** key={file.file.id}>
      <Card className={classes.card}>
        <CardMedia
          className={clsx(classes.cardMedia, {
            [classes.cardMediaImgContain]: excelMime
          })}
          image={getImageUrl()}
          onClick={() => {
            const photoUrl = `/orgs/${organizationName}/projects/${file.project.id}/photos/${file.file.id}`;
            router.push(photoUrl);
          }}
        >
          <div className={classes.iconsContainer}>
            {file.file.mime && (
              <MimeIcon mime={file.file.mime} iconSizeMime={iconSize} />
            )}
          </div>
          {excelMime && (
            <div className={classes.excelTitle}>{file.file.name}</div>
          )}
        </CardMedia>
        <Typography variant='h6' className={classes.projectLabel}>
          {file.project.label}
        </Typography>
        <div className={classes.groupWrap}>
          <div className={classes.group}>
            {file.material_group.label && (
              <Typography variant='h6' className={classes.title}>
                {t('searchFile.fileList.materialGroup')}
              </Typography>
            )}
            <Typography variant='h6' className={classes.title}>
              {t('searchFile.fileList.material')}
            </Typography>
            <Typography variant='h6' className={classes.title}>
              {t('searchFile.fileList.process')}
            </Typography>
            <Typography variant='h6' className={classes.titleWithMarginTop}>
              {imageMime
                ? t('searchFile.fileList.date')
                : t('file.lastModified')}
            </Typography>
            <Typography variant='h6' className={classes.title}>
              {imageMime
                ? t('searchFile.fileList.photographer')
                : t('searchFile.fileList.registrant')}
            </Typography>
          </div>
          <div>
            {file.material_group.label && (
              <Typography
                variant='h6'
                color='primary'
                className={classes.fileData}
              >
                {file.material_group.label}
              </Typography>
            )}
            <Typography
              variant='h6'
              color='primary'
              className={classes.fileData}
            >
              {file.material.label ?? t('searchFile.fileList.uncategorized')}
            </Typography>
            <Typography
              variant='h6'
              color='primary'
              className={classes.fileData}
            >
              {file.process.label ?? t('searchFile.fileList.uncategorized')}
            </Typography>
            <Typography
              variant='h6'
              className={classes.fileDataMarginTop}
              color='primary'
            >
              {`${formatFullDate(new Date(file.file.date), i18n.language)}`}
            </Typography>
            <Typography
              variant='h6'
              color='primary'
              className={classes.fileData}
            >
              {file.user.display_name ?? ''}
            </Typography>
          </div>
        </div>
      </Card>
    </Grid>
  );
};

export default FileCard;
`

It's a little bit confusing because it's not a table and i am working on react.js and typescript. Here everything is working perfectly but just the last assertion is where i have no clue. Notes: you can see that [data-cy="list-file"] represent the whole container and [data-cy=fileCard-list] represent each file inside of the container.