Want to change Emotion styled functions based on routing or component rendered

Question

I need to change the background color of the Homepage component that is nested in the FlexContainer styled component. Because of this I also want to change the FlexContainer background color, but only if the Homepage is rendered not the other components. Is there a way to do this?

const FlexContainer = styled.div({
  minHeight: "100vh",
  display: "flex",
  flexDirection: "column",
  backgroundColor: isHomePage ? "#ffbd4f" : "transparent",
});


const App = () => {

  return (
    <FlexContainer isHomePage={location.pathname === "/"}>
      <Header />
      <Main>
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          {/* Other routes */}
        </Switch>
      </Main>
    </FlexContainer>
  );
};

I tried googling different ways to do including using useLocation(), but this did not work

const FlexContainer = styled.div(({ isHomePage }) => ({
  minHeight: "100vh",
  display: "flex",
  flexDirection: "column",
  backgroundColor: isHomePage ? "#ffbd4f" : "transparent",
}));


const App = () => {
  const location = useLocation();

  return (
    <FlexContainer isHomePage={location.pathname === "/"}>
      <Header />
      <Main>
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          {/* Other routes */}
        </Switch>
      </Main>
 
  </FlexContainer>

); };