Conditional Render A List of Events Using Next Js and react-datepicker

Question

I am trying to render a list of events (if exist) and display a message "No Event to display" when there is no events on that day. Events are comign from my wordpress backend using advanced custom fields, hence the "event.acf.date" to query the event date.

I am using react-datepicker as my calendar and am able to display events (if there is any) when clicking on a day on the calendar.

My issue is I can't seem to display the "No event to display" when there is no events on the day chosen on the calendar.

<section className={styles.grid}>
    {events?.map((event) => {
      return (
        <div key={event.id} className={styles.card}>
          {format(startDate, "PP") === format(event.acf.date, "PP") &&
          event.title
            ? event.title.rendered
            : "No event to display"}
        </div>
      );
    })}
  </section>