I recently moved from Aura to LWC and not able to understand whats going wrong here. Below sample code

lwcpage.html

      <template for:each={names} for:item='name'>
          <div key={name.Id} class="customcss" >
             {name.Name}
          </div>
      </template>

lwcpage.js

  import { LightningElement, wire, track } from 'lwc';
  import listViewsRecords from '@salesforce/apex/UserManage.listViewsRecords';

  export default class UsermanageSearchList extends LightningElement 

       items = []; 
       names = [];

      @wire(listViewsRecords, { param : 'param1' }) 
      list({ error, data }) {
      console.log('data-->'+data);
      if(data){

       this.names = data.userLists;
       this.items = data.items;
        
      }else if (error) {
         this.error = error;
        this.items = undefined;
      }

   }


 }

The 'list' wired method is getting called twice and the first time returns undefined data and the second time data correctly retrieved.

data -> undefined

data -> < data >

Because its getting undefined, the component is giving an after renderer error

'afterRender threw an error in 'c:component' [Cannot read property 'Id' of undefined]'.

What I don't understand is why the wired method always gets called twice and getting undefined ? and if this is expected what needs to be done here?