Typing two possible kinds of array in useState with TypeScript

I'm doing the regular movie gallery type of project and I'm downloading movies and TV series from the API and displaying them in a Row component. Now, this component takes the array and maps the posters into thumbnails users can click and open.

The issue here is with TypeScript, because the useState array can receive an array of movies which have certain attributes (ie names are stored as title attribute) or TV series that have mostly others (names are stored as name attribute).

I've created a type for both types of objects, called MovieData for movies and TVData for Tv series, I've used them as below (isPosterRow defines whether it's TV series or movies):

  const [movies, setMovies] = useState<MovieData[] | TVData[]>([]);

Then I map the array as such:

{movies.map((movie, id) => (
            <CardMedia
              component="img"
              src={`https://image.tmdb.org/t/p/w500/${
                isPosterRow ? movie.poster_path : movie.backdrop_path
              }`}
              alt={isPosterRow ? movie.name : movie.title}
              key={id}
              sx={{
                width: "250px",
                maxHeight: isPosterRow ? "250px" : "100px",
                objectFit: "contain",
                transition: "transform 450ms",
                cursor: "pointer",                    
              }}
            />
          ))}

In src it works great because both movies and TV series contain poster_path and backdrop_path attributes. However, I'm getting an error in the alt attribute of the CardMedia component that attribute name doesn't exist on MovieData and title attribute doesn't exist on TVData (which is true). How do I get around this? I thought the union type would work here but it doesn't.

Try this

interface MovieData {
  title: string;
  poster_path: string;
  // other attributes for movies...
}

interface TVData {
  name: string;
  backdrop_path: string;
  // other attributes for TV series...
}

type MovieOrTV = MovieData | TVData;

function isMovieData(data: MovieOrTV): data is MovieData {
  return (data as MovieData).title !== undefined;
}

function isTVData(data: MovieOrTV): data is TVData {
  return (data as TVData).name !== undefined;
}

const [movies, setMovies] = useState<MovieOrTV[]>([]);

{movies.map((movie, id) => (
  <CardMedia
    component="img"
    src={`https://image.tmdb.org/t/p/w500/${
      isTVData(movie) ? movie.backdrop_path : movie.poster_path
    }`}
    alt={isTVData(movie) ? movie.name : movie.title}
    key={id}
    sx={{
      width: "250px",
      maxHeight: isTVData(movie) ? "250px" : "100px",
      objectFit: "contain",
      transition: "transform 450ms",
      cursor: "pointer",
    }}
  />
))}