how to make react-tab Tab deselected when clicked on other component on the page in React

Question

screenshot of the page to get clear understandingI have created Tabs for displaying items. This page contains two Tab options and one calendar.

The problem is the Tab options is not getting deselected when I click on the calendar dates to select.

I want the tabs to deselected when I click on a particular component i.e selecting a date here on a calendar component but the tabs are not getting deselected.

Here is the code of the page:

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

<StudentCalendarTabs className="calendar-tabs">
  <div
    style={{ width: "100vw", paddingLeft: "63px", backgroundColor: "white" }}
  >
    <div>
      <div className="sidenav">
        <div className="inboxTitle">Appointments</div>
        <TabList>
          <Tab
            onClick={() =>
              this.setState({
                dataFiltered: false,
                dataFiltered1: false,
                date: ""
              })
            }
          >
            Upcoming
          </Tab>

          <Tab
            onClick={() =>
              this.setState({
                dataFiltered1: false,
                dataFiltered: false,
                date: ""
              })
            }
          >
            Past
          </Tab>
        </TabList>
        <Calendar_styles>
          <div className="calheader">Select Date</div>
          <div className="control">
            <StyledCalendar
              onChange={date => {
                this.dateChanged(date);
                this.onTodoClick(date);
              }} //this where I am selecting a date on a calender. so when I choose/click on a date here then upper tabs should get deselected.
              value={this.state.date}
              nextLabel={<Direction />}
              prevLabel={<Direction className="left" />}
              next2Label={<span />}
              prev2Label={<span />}
            />
          </div>
        </Calendar_styles>
      </div>
    </div>
  </div>
  <TabPanel className="past-tab">
    {this.props.calendar.upcoming.length > 0 &&
      this.state.dataFiltered == false && (
        <AppointmentsCount>
          <StyledCalendarDates dates={this.props.calendar.upcoming} />
        </AppointmentsCount>
      )}
    {!this.props.calendar.upcoming.length && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <CalendarNoDates>{`No Upcoming Appointments`}</CalendarNoDates>
      </AppointmentsCount>
    )}
  </TabPanel>
  <TabPanel className="upcoming-tab">
    {this.props.calendar.past.length > 0 && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <StyledCalendarDates dates={this.props.calendar.past} />
      </AppointmentsCount>
    )}
    {!this.props.calendar.past.length && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <CalendarNoDates>{`No Past Appointments`}</CalendarNoDates>
      </AppointmentsCount>
    )}
  </TabPanel>

  {this.state.filteredData.length > 0 && this.state.dataFiltered == true && (
    <AppointmentsCount>
      <StyledCalendarDates dates={this.state.filteredData} />
    </AppointmentsCount>
  )}
  {!this.state.filteredData.length && this.state.dataFiltered == true && (
    <AppointmentsCount>
      <CalendarNoDates>{`No Appointments`}</CalendarNoDates>
    </AppointmentsCount>
  )}
</StudentCalendarTabs>;