Handling data from an API - How would you do it?

[Chunkford]

I pull data from an API.
The response looks like this

[
  {
    "team_id": 0,
    "team_name": "string",
    "description": "string",
    "assignment_date": "2023-07-12",
    "sort_index": 0,
    "property_assignments": [
      {
        "property_assignment_id": 0,
        "property_id": 0,
        "team_id": 0,
        "sort_index": 0
      }
    ],
    "user_assignments": [
      {
        "team_id": 0,
        "user_id": 0,
        "sort_index": 0
      }
    ]
  }
]

and when changes are made, either to the team or their assignments, the entire team object including their assignments is sent back to the API to be persisted.

There are 3 sortable areas.

1. Teams
2. Property Assignments
3. User Assignments

As you can see there is no id column for DnDkit to work (and even if there was id's they wouldn't be unique enough as they are normally sequential)

So, as it needs to follow this model

Props.items: (UniqueIdentifier | {
    id: UniqueIdentifier;
})[]

It's going to have to be either adding the id as another field to the array of objects...

const teams = getTeams.data
  ? getTeams.data.map<TeamModelReadWithId>((team) => ({
      ...team,
      id: uuidv4(),
      property_assignments:
        team.property_assignments.map<PropertyAssignmentModelReadWithId>(
          (propertyAssignment) => ({
            ...propertyAssignment,
            id: uuidv4(),
          })
        ),
      user_assignments:
        team.user_assignments.map<UserAssignmentModelReadWithId>(
          (userAssignment) => ({
            ...userAssignment,
            id: uuidv4(),
          })
        ),
    }))
  : [];

or converting them to a Record or maybe even a Map...

let team: TeamDnD = {};
for (const team of getTeams.data) {
  let teamUser: TeamUserDnD = {};
  let teamProperty: TeamPropertyDnD = {};

  for (const userAssignment of team.user_assignments) {
    teamUser[uuidv4()] = {
      ...userAssignment,
    };
  }
  for (const propertyAssignment of team.property_assignments) {
    teamProperty[uuidv4()] = {
      ...propertyAssignment,
    };
  }

  team[uuidv4()] = {
    ...team,
    property_assignments: teamProperty,
    user_assignments: teamUser,
  };
}

I can't work out which one would be the best and why, both have their pros and cons.
I like working with 'Record's when dragging and dropping but then saving it back to the API it a nightmare.
But just adding the id as a field makes things so much easier when updating the API, but working with an array of objects in onDragOver and onDragEnd frustrates the hell out of me.

How would you go about doing it?
There's only so much my rubber duck can do :)