I am making an attendance & time management portal. I have two buttons Checkin & checkOut.On clicking the check-in button check-in time & attendance is marked & on clicking the checkOut button checkOut time is marked. What I am trying to do is I am matching the check-in date which is coming from the backend & the current date from the front end, if it matches Checkin & checkout button should be enabled & if the condition is false these two buttons should be disabled. My scenario is first, my check-in button should be enabled & the checkout button should be disabled.on clicking the check-in button check-in time is marked. At this point, the check-in button should become disabled and the checkOut button should become enabled. When I press the checkOut button checkout time is marked & the checkOut button also becomes disabled. These two buttons should remain disabled until the date changes. on the next date, the CheckIn button should automatically become enabled & the same pattern should follow. Here, whether the condition is true or not button disables on clicking & doesn't enable again.

const employee = useSelector(state => state.employee);

const [checkInDisable, setCheckInDisable] = useState(false);
const [checkOutDisable, setCheckOutDisable] = useState(true);

var currentDate = new Date();
var d = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var date = d + "-" + month + "-" + year;

useEffect(() => {
  
  dispatch(getEmployeeCheckIn());
  dispatch(getEmployeeCheckOut());

  employee.checkIn.map(In => In.day === date).toString()
    ? setCheckInDisable(true) && setCheckOutDisable(false)
    : setCheckInDisable(false);
  employee.checkOut.map(Out => Out.day === date).toString()
    ? setCheckOutDisable(true)
    : setCheckOutDisable(false);

  },
  [dispatch, employee, date]
);