Почему при создании первого объекта он не отображается в масиве todos?

import React, { useState } from 'react'
import './App.css'
import { Button, TextField } from '@mui/material'
import { Itodo } from './assets/types'

export const App = () => {

  const [todoText, setTodoText] = useState<string>('')

  const [todos, setTodos] = useState<Itodo[]>([])

  const addTodo = () => {
    const todoBody:Itodo = {
      bodyText: todoText,
      completed: false,
      id: Date.now()
    }
    if(todoText == '') return
    setTodos([...todos, todoBody])
    setTodoText('')
    console.log(todos)
  }



  return (
    <div className='background'>
      <div className='head'>
        <TextField value={todoText} onChange={event => setTodoText(event.target.value)} id="standard-basic" label="Введите текст" variant="standard" InputLabelProps={{ sx: {fontSize: '18px'} }} sx={{width: '40%'}}/>
        <Button variant="contained" color="success" size='large' sx={{ marginLeft: '10px' }} onClick={addTodo}>
          Добавить
        </Button>
      </div>
      <div className='body'>
        {todos.map((body) => {
          return (
            <div key={body.id}>
              {body.bodyText}
            </div>
          )
        })}
      </div>
    </div>
  )
}

![Это результат console.log]: (https://i.stack.imgur.com/WZduD.png)