Render components via window.location.pathname

I am trying to render different components via an if-statement, that depends on the path name. See return statement below.

return (
    <>  
      <Navbar style={{position:"sticky"}} ammount={safedIds.length} setShowCalendar={setShowCalendar} />
      <DateBar date={currentDate? currentDate:"no date available"} />
      {eventsPrep.length > 0 ? 
        window.location.pathname === "/calendar"?
        <Calendar />
        :
        <Home events={eventsPrep} addSafedId={addSafedId} />
      : <></>}
    </>
    
  );

I know that the path updates but the components do not.

How do I fix this?