React DataTable Component - Default Sort Not Working

Question

I use the react-data-table-component (along with the react-data-table-component-extensions library) for displaying various tables. I have a datatable where the sorting of any column works when I click on the column header but the default sorting does not work when the page is loaded (on other pages where I use different data, it works).

The initial json array data contains a labelid which I use to get the labelname and labelyear, then I add these values into a new json array and pass the new one into the DataTable.

Code Snippet:

const [initialDiary, setInitialDiary]       = useState([]);
const [updatedDiaries, setUpdatedDiaries]   = useState([]); 

useEffect(() => {
      initialDiary.map(diary => {
          // the get functions return simple strings
          var newDiary = {...diary, ['labelName']:getLabelName(diary.labelID),
                                    ['labelYear']:getLabelYear(diary.labelID)};
          setUpdatedDiaries(prev => [...prev, newDiary]);
      })
}, [winediaries]);

...

// I want to sort by labelyear, the 3rd column
<DataTableExtensions columns={columns} data={updatedDiaries} export={false} print={false}>
      <DataTable noHeader defaultSortField={3} defaultSortAsc={false} highlightOnHover customStyles={customStyles} 
                 pagination paginationRowsPerPageOptions={rows} paginationPerPage={15}>
      </DataTable>
</DataTableExtensions>