If statement inside array object map

I have an array full of names and roles, fetched from an API. Currently, the innerhtml function is printing every name inside this array, but I'd like to print only the names of people with the 'director' roles.

So I'd like to know how can I implement an If statement inside this array object map.

//Function to list the cast and crew from a movie
function movieDets_CastCrew(url) {       
    
    fetch(url)
        .then(res => res.json())
        .then(data => document.getElementById("leftcolumn").innerHTML =
    `
    <h6>Director(s):</h6>
    <p>${data.crew.map(({ name }) => name).join(", ")}</p>
     `
     );   
}

Thanks!