Функциональный компонент React во вложенных картах перерисовывается несколько раз

У меня есть три компонента: приложение, фильмы и ввод.

В фильмах он отображает сведения о фильме и отображает поля ввода для каждого фильма.

export default function Movies(props) {
  console.log("HOW MANY TIMES")
  return (
    <div className="movies">
    {props.movies && props.movies.map(m=> <section>
    <span>{m.name}</span>
    {m.actors.map(a=>(<div>
    <div>{a.name}</div>
    <div>{props.salaryChildren && React.cloneElement(props.salaryChildren, {id: m.id})}</div>

Мой компонент приложения отображает фильмы по типу

export default function App(props) {
  const library = [
    {
      id: 5,
      name: "A",
      type: "blockbuster",
      movies: [
        {
          id: 5,
          name: "Cast away",
          actors: [{ name: "Tom Hanks" }, { name: "Actor B" }]
        }
      ]
    }
  ];
  const renderByType = (type) => {
    if (type === "blockbuster") {
      return <input />;
    }
  };
  return (
    <>
      {library.map((l) => (
        <div>
          <Movies movies={l.movies} salaryChildren={renderByType(l.type)} />
        </div>
      ))}
    </>
  );
}
    </div>))}
    </section>)}
    </div>
  );
}

Вход

export default function Input(props) {
  
  return (<input/>)
}

Когда я записываю в консоль, сколько раз фильмы были обработаны внутри обработки изменения ввода, они отображаются столько раз, сколько реквизитов фильмов у меня есть. Я хочу, чтобы он отображался один раз. не x раз по фильмам.длина

Любая идея, почему он ведет себя таким образом?