구현되었으나 1초마다 Interval되고 있어 부하가 크다...!

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

import styled from '@emotion/styled';
import Modal from './Modal';

const ToastItem = styled.div`
  position: relative;
  display: flex;
  width: 350px;
  height: 60px;
  padding: 0 20px;
  align-items: center;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.5s ease-out;

  &:first-of-type {
    animation: move 0.5s ease-out forwards;
  }

  @keyframes move {
    0% {
      margin-right: -200px;
    }
    100% {
      margin-right: -30px;
    }
  }
`;

const Toast = () => {
  const [timerOn, setTimerOn] = useState(false);
  const [isShow, setIsShow] = useState(false);
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    let now = null;
    if (timerOn) {
      now = setInterval(() => {
        const today = new Date();
        const minutes = today.getMinutes();
        const seconds = today.getSeconds();
        if (minutes === 0 && seconds === 0) {
          setIsShow(true);
          setTimeout(() => {
            setIsShow(false);
          }, 60000);
        }
      }, 1000);
    } else {
      setIsShow(false);
      clearTimeout(now);
      setTimerOn(true);
    }
    return () => clearInterval(now);
  }, [timerOn]);

  useEffect(() => {
    return () => {
      setIsVisible(false);
    };
  }, [isVisible]);

  return isShow ? (
    <ToastItem
      onClick={() => {
        ReactDOM.render(
          <Modal visible={isVisible}>인증하는 모달</Modal>,
          document.getElementById('app')
        );
      }}
    >
      인증시간입니다. 인증해주세요
    </ToastItem>
  ) : null;
};

export default Toast;