Aura Component Datatable not showing data

*** Component ***

<aura:component controller ="VehicleController">
    <aura:attribute name="VehicleSelected" type="String"/>
    <aura:attribute name ="TableData" type="Vehicle__c[]"/>
    <aura:attribute name="vehicleList" type="List"/>
    <aura:attribute name ="mycolumns" type="List"/>

   <aura:handler name="init" value="{!this}" action="{!c.getVehicleList}" />
    <div class="slds-container_large slds-container_center
              slds-m-top_xx-large  
              slds-m-left_medium
              slds-m-right_medium">
    <!-- give grid and add dropdown and button -->
    <div class="slds-grid slds-gutters ">
        <div class="slds-col slds-large-size_2-of-3">
   <lightning:select name="select1" label="choose Vehicle" value="{!v.VehicleSelected}">
        <option value="">--None--</option>
         <aura:iteration items="{!v.vehicleList}" var="item">
        <option value="{!item.id}">{!item.Name}</option>
    </aura:iteration>
    </lightning:select>
        </div>
        <div class="slds-col slds-large-size_1-of-3 slds-m-top_large   slds-m-left_medium">
             <lightning:button variant="Brand" label="Add"
                               title="Base action" 
                               onclick="{!c.AddVehicleToTable}"/>
        </div>
        </div>  
        <br/>
        <br/>
        <b>List of Selected Vehicle : "{!v.TableData.length}"</b>
          <lightning:datatable 
                         data="{!v.TableData}" 
                         columns="{!v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         onrowaction="{!c.DeleteRecord}"      
                         />
        
        
    </div>
</aura:component>

*** js Controller ***

({
    getVehicleList : function(component, event, helper) {
       var action = component.get("c.getVehicle")
       action.setCallback(this,function(response)
       {
        var state = response.getState();
        if(state === "SUCCESS")
              {
                  component.set("v.vehicleList",response.getReturnValue()); 
              }
         });
        $A.enqueueAction(action);
        
    },
    AddVehicleToTable :function(component, event, helper) {
         component.set("v.mycolumns", [ 
            {label: 'Vehicle', fieldName:'Name', type: 'text'},
            {type: "button", typeAttributes: {
                label: 'DELETE',
                name: 'DELETE',
                title: 'DELETE',
                disabled: false,
                value: 'delete',
                iconPosition: 'left'
            }}
        ]);
        
        var VehicleName = component.get("v.VehicleSelected");
        alert(VehicleName);
        var VehicleSeletedList = component.get("v.TableData");
        VehicleSeletedList.push(VehicleName);
      
        component.set("v.TableData",VehicleSeletedList);
       
        
    },
    DeleteRecord :function(component, event, helper) {
        alert('deleteClicked');
    }
})

***** Server controller *****

public class VehicleController {
     @auraEnabled
    public static List<Vehicle__c> getVehicle()
    {
        return [select id,Name from Vehicle__c];
    }
}