Ошибка Received NaN for the `children` attribute. If this is expected, cast the value to a string. Как решить?

При Get запросе получаю объект и передаю ее через пропсы в компонент таймера, и на консоли возникает ошибка "Received NaN for the children attribute. If this is expected, cast the value to a string". На самой странице сперва появлется таймер в виде NaN:NaN:NaN:NaN, и уже потом нормально работает.

const Lobby = () => {
  let {id} = useParams()

  const [lobby, setLobby] = React.useState('')

  useEffect(() => {
    fetch(`${ENDOPOINT}/list/${id}/`, {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((data) => {
        setLobby(data)
      })
  }, [])

return (
    <PageTemplate>
      <div>
         <Timer date={lobby.date}/>
        }
      </div>
    </PageTemplate>
  )
}

Таймер

const Timer = (props) => {
    const [timerDays, setTimerDays] = useState('00');
    const [timerHours, setTimerHours] = useState('00');
    const [timerMinutes, setTimerMinutes] = useState('00');
    const [timerSeconds, setTimerSeconds] = useState('00');
    
    useEffect(() => {
      const  countdownDateFormat = `${props.date}`.split("+")[0]
      const countdownDate = new Date(countdownDateFormat).getTime();

      const now = new Date().getTime();
      const distance = countdownDate - now;

      const timer = window.setInterval(() => {
        let days = Math.floor(distance / (1000 * 60 * 60 * 24));
        let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((distance % (1000 * 60)) / 1000);
        if(distance < 0) {
          clearInterval(timer)
        } else {
          setTimerDays(days)
          setTimerHours(hours)
          setTimerMinutes(minutes)
          setTimerSeconds(seconds)
        }
      }, 1000);
    }, [timerSeconds]); 

  return (
    <section className='timer'>
      верстка
    </section>
  )
}

export default Timer