How to search movies via actor's name? (TMDB)

Question

I'm creating a web site dedicated to find films as convenient as possible, using TMDB service. Currently, I'm trying to make a search, using just an actor's name. I've learned a lot about TMDB and all its features. Eventually, I've created code that should have found movies starring with entered actor, yet it doesn't. Moreover, when I type any actor's name, I just see an option of film, which is 'Undefined' (sometimes there are two films). I'll attach my code and I'd be more than grateful for any suggestions or explanations of people, who already had their own experience with TMDB. Thanks for time spent for reading this article. Have a good day!

HTML:

<div class="actor-form" id="actorForm">
        <input type="text" class="actor-form-input" placeholder="Desired Actor:" name="name" id='actorNameInput'
            autocomplete="off">
        <label for="actorNameInput" class="actor-form-label">
            <span class="actor-form-span">Desired Actor</span>
        </label>
    </div>

    <main id="main"></main>

CSS:

.actor-form {
    position: absolute;
    padding: 10px 0 0 0;
    width: 40%;
    left: 50%;
    top: 35%;
    transform: translate(500%, -50%);
    transition: all 2s;
    cursor: default;
}

.actor-form-input {
    font-family: 'Marvel', sans-serif;
    width: 100%;
    border: 0;
    border-bottom: 2px solid #202020;
    outline: 0;
    font-size: 26px;
    color: #202020;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.4s;
}

.actor-form-input::placeholder {
    color: transparent;
}

.actor-form-input:placeholder-shown+.actor-form-label {
    font-size: 26px;
    cursor: text;
    top: 20px;
}

.actor-form-label {
    position: absolute;
    top: -20px;
    display: block;
    transition: 0.2s;
    color: #202020;
    font-size: 24px;
    font-family: 'Marvel', sans-serif;
}

.actor-form-input:focus+.actor-form-label {
    position: absolute;
    top: -20px;
    display: block;
    transition: 0.2s;
    color: #21ebff;
    font-size: 24px;
}

.actor-form-input:focus {
    border-bottom: 2px solid #21ebff;
}

.actor-form-span {
    -webkit-user-select: none;
    user-select: none;
}

JS:

// Show Movies

const API_KEY = 'api_key= [here is my apikey]';
const BASE_URL = 'https://api.themoviedb.org/3';
const API_URL = BASE_URL + '/discover/movie?sort_by=popularity.desc&' + API_KEY;
const IMG_URL = 'https://image.tmdb.org/t/p/w500';
const searchURL = BASE_URL + '/search/movie?' + API_KEY;
const searchPersonURL = BASE_URL + '/search/person?' + API_KEY;

getMovies(API_URL);

function getMovies(url) {

    lastUrl = url;
    fetch(url).then(res => res.json()).then(data => {
        if (data.results.length !== 0) {
            showMovies(data.results);
            currentPage = data.page;
            nextPage = currentPage + 1;
            prevPage = currentPage - 1;
            totalPages = data.total_pages;

            current.innerText = currentPage;

            if (currentPage <= 1) {
                prev.classList.add('disabled');
                next.classList.remove('disabled')
            } else if (currentPage >= totalPages) {
                prev.classList.remove('disabled');
                next.classList.add('disabled')
            } else {
                prev.classList.remove('disabled');
                next.classList.remove('disabled')
            }

            tagsEl.scrollIntoView({ behavior: 'smooth' })

        } else {
            main.innerHTML = `<h1 class="no-results">No Results Found</h1>`
        }

    })

}

function showMovies(data) {
    main.innerHTML = '';

    data.forEach(movie => {
        const { title, poster_path, vote_average, overview, id } = movie;
        const movieEl = document.createElement('div');
        movieEl.classList.add('movie');
        movieEl.innerHTML = `
             <img src="${poster_path ? IMG_URL + poster_path : "http://via.placeholder.com/1080x1580"}" alt="${title}">
            <div class="movie-info">
                <h3>${title}</h3>
            </div>
            <div class="overview">
                <h3>Overview</h3>
                ${overview}
                <br/> 
                <button class="know-more" id="${id}">Know More</button
            </div>
        
        `

        main.appendChild(movieEl);

        document.getElementById(id).addEventListener('click', () => {
            console.log(id)
            openNav(movie)
        })
    })
}

// Actor Form

const actorFormLabel = document.querySelector('.actor-form-label');
const actorNameInput = document.getElementById('actorNameInput');

actorNameInput.addEventListener('input', function (e) {
    let val = e.target.value.trim();
    if (val.length) {
        getMovies(searchPersonURL + '&query=' + encodeURI(val));
        console.log(encodeURI(val));
    }
});