Datagrid incorrectly shows sort icon on columns when Fields use the sort prop

[fzaninotto]

What you were expecting:

Adding a sort prop to a <Field> in a <Datagrid> doesn't mess up with the datagrid header

What happened instead:

React-admin gets confused about the actual sort order and shows more than one sort arrow

Steps to reproduce:

I used the new capacity of <ReferenceOneField> to work on a one-to-many relationship, introduced in #8306:

export const ConversationList = () => (
  <List>
    <Datagrid rowClick="show">
      <TextField source="customer" />
      <ReferenceOneField
        label="Updated"
        reference="messages"
        target="conversation_id"
        sort={{ field: "timestamp", order: "DESC" }}
      >
        <DateField source="timestamp" showTime />
      </ReferenceOneField>
      <ReferenceOneField
        label="Latest message"
        reference="messages"
        target="conversation_id"
        sort={{ field: "timestamp", order: "DESC" }}
      >
        <TextField source="message" />
      </ReferenceOneField>
      <TextField source="status" />
    </Datagrid>
  </List>
);

This results in two arrows being shown in the datagrid header, even before I choose one:

CodeSandbox

https://codesandbox.io/s/distracted-mayer-jj8pjf?file=/src/posts/PostList.tsx

I noticed the bug doesn't occur when I set the sort prop on the <List>

Environment

• React-admin version: 4.6.0
• Last version that did not exhibit the issue (if applicable): n/a
• React version: 18
• Browser: Chrome

[fzaninotto]

This is caused by ReferenceOneField having a default prop source of "id", so when the default sort is on the id field, the datagrid header thinks it is sorted by this field.