Display a Media filename in custom component, Array Field

[alonronin]

I have the following collection:

import type { GlobalConfig } from 'payload';

export const Logos: GlobalConfig = {
  slug: 'logos',
  fields: [
    {
      name: 'files',
      type: 'array',
      admin: {
        initCollapsed: true,
        components: {
          RowLabel: '@/Logos/RowLabel#RowLabel',
        },
      },
      fields: [
        {
          name: 'file',
          type: 'upload',
          displayPreview: true,
          relationTo: 'media',
        },
      ],
    },
  ],
};

This is the RowLabel component:

'use client';
import { RowLabelProps, useRowLabel, useField } from '@payloadcms/ui';

export const RowLabel: React.FC<RowLabelProps> = () => {
  const { data, path } = useRowLabel();
  const value = useField({ path });

  const label = data.file; // have only the file id 677fd0a89d2010d16d18b47c
  console.log(value); // { path: 'file.0', value: undefined }

  return <div>{label}</div>;
};

How can one get the file's name? I have only the id and not the value, also the useField hook return the value in the object as undefined.

{
  customComponents: undefined,
  errorMessage: undefined,
  errorPaths: [],
  filterOptions: undefined,
  formInitializing: true,
  formProcessing: false,
  formSubmitted: false,
  initialValue: undefined,
  path: 'logos.13',
  rows: undefined,
  setValue: [Function: P],
  showError: false,
  valid: undefined,
  value: undefined
}