Вы устанавливаете новый интервал каждый раз, когда компонент выполняет рендеринг.
Чтобы правильно делать то, что, я думаю, вы пытаетесь сделать, вам нужно поместить свой setInterval в useEffect
хук.
Как это:
function Welcome() {
const [time, setTime] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => clock(), 1000);
return () => clearInterval(interval)
}, [])
function clock() {
setTime(new Date());
}
return (
<WelcomeBox>
<WelcomeTime>
{date.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
hour12: true,
})}
</WelcomeTime>
</WelcomeBox>
);
}