How do I list the names of contacts of an account and navigate to the contact record when one is clicked on

Question

I am trying to list the names of the child contacts of an account with the option to click on one of said contacts names and be redirected to its record page. Everything works except the redirecting upon clicking on the contact. Instead of the contact record it redirects me to the account record instead.

component

aura:iteration  items="{!v.ContactList}" var="contact">
<tr class="slds-hint-parent">
    <td>
    <a href=" " class=" slds-text-link"  onclick="{!c.navigateToRecord}" >{!contact.Name}</a>
    </td>
</tr>

</aura:iteration

Javascript

    ({
    navigateToRecord : function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        var targetId = event.target.id;
        navEvt.setParams({
          "recordId": targetId,
          "slideDevName": "detail"
        });
        console.log(selectedRecordId);
        navEvt.fire();
    },
    getRelatedContactRecords : function(component, event, helper) 
    {
        var ContactListInstance = component.get("c.getRelatedContacts");

        ContactListInstance.setParams
        ({
            recordId: component.get("v.recordId")
        });
        
        ContactListInstance.setCallback(this, function(data) 
            {
                component.set("v.ContactList", data.getReturnValue());
            });
        $A.enqueueAction(ContactListInstance);
    }
})