Ternary operator not working properly in react

So I have a component called PrivateRoute.js that basically protects some routes and redirects a user to the login page if they are not logged in ,I would like to display an alert message inside the ternary operator, my alert goes through but after a few seconds I get an error

PrivateRoute

function PrivateRoute({ component: Component, ...rest }) {
    return ( 
      <Route
        {...rest}
        render={props =>
        /*If "IsLoggedIn" is located inside the local storage(user logged in), then render the component defined by PrivateRoute */
            localStorage.getItem("IsLoggedIn")  ? (
            <Component {...props} />
          ) : alert('You must be logged in to do that!') (  //else if there's no authenticated user, redirect the user to the signin route 
            <Redirect 
              to='/signin' 
            /> 
          ) 
        }
      />
    );
  }

this is the error I get in react:

How do I display an alert inside the ternary operator without getting this error?