Как исправить ошибку после обновления страницы (react-douter-dom)?

Пытаюсь сделать маршруты с помощью react-router-dom и столкнулся с проблемой что что если я даю двойной путь(/list/:name) то при переходе всё загружается, но если обновить страницу то я получаю ошибку(скриншот ошибки: https://ibb.co/XpNSSYC). Если даю просто(/:name)всё работает хорошо. В чём может быть проблема? Routes

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

Header

<ul>
        <li>
          <Link to="/list/popular">Popular</Link>
        </li>
        <li>
          <Link to="/list/top_rated">Top rated</Link>
        </li>
        <li>
          <Link to="/list/upcoming">Upcoming</Link>
        </li>
</ul>

ChooseListFilm

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

ListFilm

//Здесь я получаю список фильмов по API и вывожу их