Display toast after action
Not as clean as it could be, some code duplication, and there's also some state mutation in your addMovie function.
Issues

movies.push(movie); mutates the current state object.
checkForDuplicate isn't a clear name, i.e. checking for duplicates is clear, but what is the return value?
Using isMovieDuplicate as the negation of the result from checkForDuplicate is completely counter-intuitive and confusing.
When adding data to current state and computing the next state, a functional state update should really be used.
Ternary logic could be reduced/simplified.
Handle side-effect of persisting to local storage in the component as an &quot;effect&quot; of updating the movies state.

Suggestions

Use a functional state update and shallow copy of current state in order to not mutate current state and correctly enqueue state updates.
Change checkForDuplicate to checkIsDuplicate to make it more clear the return value is likely a boolean (by isXXX naming convention) and will be true if it is a duplicate.
Remove isMovieDuplicate and use checkIsDuplicate directly in conditional test.
Remove the ternary. Assume duplicate failure, only update if not a duplicate and adding to movie array.
Use an useEffect hook to persist to localStorage (and eventually to DB).

Code
const addMovie = (movie: IMovie) =&gt; {
  let message = 'is already added to your watchlist.';
  let variant = 'warning';

  if (!checkIsDuplicate(movies, movie)) {
    setMovies(movies =&gt; sortMovieList([...movies, movie]));
    message = 'has been added to your watchlist.';
    variant = 'success';
  }

  displaySnackbar(`${movie.original_title} ${message}`, { variant });
};

useEffect(() =&gt; {
  addMovieToLocalStorage(movies);
}, [movies]);