Как правильно указать Route по :id на два условия

Пытаюсь сделать роуты и столкнулся с проблемой.Хочу сделать переход на разные списки фильмов где в адресе будет указан какой это список (/popular или /upcoming), а также на страницу про фильм и в адресе будет id фильма (/44535).Тот код который я написал работал но только когда есть один из роутов например этот

<Route path="/:name" children={<ChooseListFilm />} />

Как только я добавил второй с /:id всё перестал работать.Я понял что они как-то друг другу мешает но не знаю как это исправить.По отдельности они работают Но если вместе тогда нет.Буду рад помощи.Спасибо!

Route

    <Switch>
        <Route path="/:name" children={<ChooseListFilm />} />
        <Route path="/:id" children={<ChooseFilm />} />
    </Switch>

Header

<li>
    <Link to="/upcoming">
        Upcoming
    </Link>
</li>
<li>
    <Link to="/popular">
        Popular
    </Link>
</li>

ChooseListFilm

export default function ChooseListFilm() {
    let {name} = useParams();
  return (
        <ListFilms  
          filmType={name}
        />
  );
}

FilmCards

// Здесь я перебираю API и достаю id  фильма
<Link to={`${value.id}`}>
   <h1>{value.title}</h1>
</Link>

ChooseFilm

export default function ChooseFilm() {
    let {id} = useParams();
  return (
        <About 
            filmId={id}
        />
  );
}