Variables names in callbacks [closed]

I’m working on a JavaScript project, and there’s a debate within my team regarding the use of short vs. descriptive variable names in inline callbacks. Here are two versions of the same piece of code:

My code:

const nextSelectedLabels = items
  .filter(i => i.selected)
  .map(i => this.filteredVehicleProjects.find(p => p.name === i.itemData['label']))
  .map(p => ({ label: p.name, sublabel: p.businessProject.projectName, td: p }));

Suggested by My Team:

const nextSelectedLabels = items
  .filter(item => item.selected)
  .map(item => this.filteredVehicleProjects.find(project => project.name === item.itemData['label']))
  .map(project => ({ label: project.name, sublabel: project.businessProject.projectName, td: project }));

While I prefer the shorter variable names for conciseness, my team argues that the longer, more descriptive names is better and we should use it everywhere.

I completely agree with using descriptive names for methods, classes, function names, and arguments. However, I feel that using long, descriptive names for one-line callbacks is overkill and does not help much in readability.

Are there best practices or guidelines that suggest when to use one approach over the other? Wdyt?

Thanks !