Map and filter method not working after fetching data from api

Question

I needed to display the first 3 first names from the following API: https://reqres.in/api/users. After fetching, when I use a combination of for and if loop, it works(commented out in the code section). But I needed to use map and filter and there I could not succeed.

async function getTheArray() {
    const response = await fetch('https://reqres.in/api/users');
    const dataObject = await response.json();
    const namesArray = dataObject.data;
    // const names = [];
    // for(let i = 0; i < namesArray.length; i++) {
    //     if(namesArray[i].id < 4) {
    //         names.push(namesArray[i]);
    //     }
    // }
    const names = namesArray.filter(person => {
        person.id < 4
    });
    return names;
}

const names = getTheArray();
console.log(names);