I applied favicon to react using helmet, but not all of them are applied

Question

1. Circumstances that apply

   route = "/", "/login"

2. Situations that do not apply(If ":" exists)

   route = "/:movieId", ":castId"

//App.js
 return (
    <ThemeProvider theme={theme === false ? lightTheme : darkTheme}>
      <Helmet>
        <link href={Logo} />
      </Helmet>
      <GlobalStyles />
      <Wrapper>
        <Suspense fallback={<div>Loading...</div>}>
          {/* <Header> */}
          <NavBar />

          <Switch>
            <Route exact path="/" component={Auth(LandingPage, null)} />
            <Route exact path="/login" component={Auth(LoginPage, false)} />
            <Route
              exact
              path="/register"
              component={Auth(RegisterPage, false)}
            />
            <Route
              exact
              path="/movie/:movieId"
              component={Auth(MovieDetail, null)}
            />
            <Route
              exact
              path="/cast/:castId"
              component={Auth(CastPage, null)}
            />
            <Route
              exact
              path="/favorite"
              component={Auth(FavoritePage, true)}
            />
            <Route exact path="/loading" component={Auth(LoadingPage, null)} />
          </Switch>
          <Footer />
        </Suspense>
      </Wrapper>
    </ThemeProvider>
  );

Titles work well. Could you please tell me the cause?

Answer 1

Make sure the Helmet component is mounted for all pages by putting it high enough in the component tree.