MovieSearchComponent

• With the useState the common pattern is to name the state update function matching with the state value, i.e. movieList and setMovieList. This makes it clear what state the function will update.
• I had to read and reread your description of addMovie and compare it against the actual implementation. It isn't clear if the function is to add a movie, add an array of movies, or, based on the implementation, replace existing movie array list. The name of the function and the result of the function executing should match. In your description you say addMovie updates the movielist array, so for the sake of code review I'll assume that to mean the third option with state replacement. In this case the callback function can simply be setMovieList. Update the prop name as well.

Code suggestions

import React, { Fragment } from 'react';

...

const MovieSearchComponent = () => {
  const [movieList, setMovieList] = useState<Movie[]>([]);

  return (
    <Fragment>
      <MovieSearch setMovieList={setMovieList} />
      <MovieResultList movieList={movieList}/>      
    </Fragment>
  )
};

MovieSearch

• Update prop addMovie to setMovieList.
• Values like apiKey and baseurl that never change don't need to be in the functional component body and continually redefined. Declare them externally in the file.
• It may be better to extract the synthetic event data and allow the event object to be returned to the event pool as quickly as possible. Extract and pass the event's target's value to setMovieSearchResults.
• Handle the fetch request's unhappy paths, i.e. a not-successful responses or errors handling successful responses. Checking that the fetch was successful.
• You should always standardize and sanitize user input.

Code suggestions

const apikey = 'api_key=***************dad4';
const baseurl = 'https://api.themoviedb.org/3/search/movie?'

const Search = styled.input`
  color: green;
`;

const MovieSearch = ({ setMovieList }) => { 
    const searchTMDBapi = e => {
        const { value } = e.target;

        // Simple example: URI encode and lowercase
        // ... there's more you could do
        const query = encodeURI(value.toLowerCase());

        setMovieSearchResults(query);
    }

    const setMovieSearchResults = debounce(query => {
        fetch(baseurl + apikey + '&language=en-US&query=' + query + '&page=1&include_adult=false')
          .then(response => {
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            return response.json();
          })
          .then(data => setMovieList(data.results))
          .catch(console.error);
  }, 500);

  return <Search placeholder="Search" onChange={searchTMDBapi}/>
}

MovieResultList

• Pretty simple & clean component. Only suggestion here might be to tighten up variables by using object destructuring.

Code suggestions

const MovieResultList = ({ movieList }) => (
  <div>
    <ul>
      {movieList.map(({ id, original_title }) => <li key={id}>{original_title}</li>)}
    </ul>
  </div>
);