React : Component with a clock re-rendering each second

I made this component representing a HH:MM clock.
It’s re-rendering every second. I would like to be re-rendered every minute.
A tooltip is attached to it. The tooltip cannot be shown because of the re-render.
How can I handle this situation ?

import TooltipComp from '@components/Shared/TooltipComp'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

const Clock = () => {
    const [Time, setTime] = useState(new Date())
    const { t } = useTranslation();

    useEffect(() => {
        let now = new Date()
        while (now.getSeconds() !== 0) {
            const interval = window.setInterval(() => {now = new Date()}, 1000)
            return () => window.clearInterval(interval);
        }
        setTime(now);
    }, [])
    
    const formatTime = (time) => {
        return time < 10 ? `0${time}` : time
    }

    const date = Time.toLocaleDateString(t('locale'), {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })

    return (
    <>
        <TooltipComp text={date}>
            <div style={{fontSize: "9px", fontFamily: "PX", cursor: "default"}}>
                {formatTime(Time.getHours())}
                &thinsp;:&thinsp;
                {formatTime(Time.getMinutes())}
            </div>
        </TooltipComp>
    </>
  )

  
}

export default Clock

I already tried using useMemo hooks, and multiple variations of the useEffect one.