the github profile API data is undefined in javascript

I already check again on this code, but still coulnd’t figure it out. Why it won’t works. So that I manage to make this web app using github API.
undefined

but when i tried to search some data by their name, it turns out ‘undefined’ for everything that i was trying to find, like name, image, bio and etc.

My html code:

<html>
    <head>
        <title>Github Profile!</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
<body>
        <form id="form">
            <input type="text"
            id="search"
            placeholder="Search a User Here" />
        </form>
        <main id="main"></main>
        <script src="script.js" defer></script>
</body>
</html>

Javascript:

const APIURL = 'https://api.github.com/users';

const main = document.getElementById('main');
const form = document.getElementById('form');
const search = document.getElementById('search');

async function getUser(user) {
    const resp = await fetch(APIURL + user );
    const respData = await resp.json();

    createUserCard(respData);
}

function createUserCard(user) {
    const cardHTML = `
        <div class="card">
            <div>
                <img src="${user.avatar_url}"
                alt="${user.name}" />
            </div>
            <div>
                <h2>${user.name}</h2>
                <p>${user.bio}</p>

                <ul>
                    <li>${user.followers}</li>
                    <li>${user.following}</li>
                    <li>${user.public_repos}</li>
                </ul>
            </div>
        </div>
    `;

    main.innerHTML = cardHTML;
}

form.addEventListener('submit', (e) => {
    e.preventDefault();

    const user = search.value;

    if (user) {
        getUser(user);

        search.value = "";
    }
});

I don’t know what actually went wrong here.