Abykeev

const [mode, setMode] = useState(null);

const handleDay = () => {
  setMode(mode === `day` ? null : `day`);
};
const handleWeek = () => {
  setMode(mode === `week` ? null : `week`);
};
const handleMonth = () => {
  setMode(mode === `month` ? null : `month`);
};
const handleYear = () => {
  setMode(mode === `year` ? null : `year`);
};

<кнопка onClick={handleDay}>Day</кнопка >
<кнопка onClick={handleWeek}>Week</кнопка >
<кнопка onClick={handleMonth}>Month</кнопка >
<кнопка onClick={handleYear}>Year</кнопка >

{mode === `day` && <div> <Components1/> </div>}
{mode === `week` && <div> <Components2/> </div>}
{mode === `month` && <div> <Components3/> </div>}
{mode === `year` && <div> <Components4/> </div>}

const handleDay = () => {
  setVisibleDay(!visibleDay);
  setVisibleWeek(false);
  setVisibleMonth(false);
  setVisibleYear(false);
};