После создании первого обьекта в масиве в console.log отображается пустой масив

Суть: при создании первого обьекта в console.log отображается пустой масив (оно и понятно, так как масив заполняется "с задержкой", а console.log отображает текущее состояние), с рендером всё хорошо. Но в чём проблема, я хочу чтоб после создания каждого нового обьекта так же заполнялся масив в localstorage но выходит так что последний обьект не попадает в localstorage и после перезагрузки страницы массив стаёт на 1 обьект короче

форма создания todo:

import React, { FC, useState } from 'react'
import './styles.scss'
import { ITodo } from '../../types/index'


interface ICreateForm {
    create: (value: string) => ITodo[]
}

const CreateForm: FC<ICreateForm> = ({ create }) => {

    const [text, setText] = useState('')
    const createNewTask = async () => {

        localStorage.setItem('todos', JSON.stringify(await create(text)))
        setText('')
    }

    return (
        <div className='formBody'>
           <input value={text} onChange={(e) => setText(e.target.value)} className='input'></input>
           <button onClick={createNewTask} className='button'>Add</button>
        </div>
    )
}

export default CreateForm

UseTodo.tsx

import { useState } from "react"


interface ITodo {
    id: number,
    text: string
}

export const useTodo = (initialValue = [] as ITodo[]) => {

    const [todos, setTodo] = useState<ITodo[]>(initialValue)

    const getTodos = () => todos

    const addTodo = async (value: string) => {
        const todoBody = {
            id: todos.length + 1,
            text: value
        }

        setTodo([...todos, todoBody])
        return todos
    }

    const deleteTodo = (id: number) => {
        setTodo(todos.filter(todo => todo.id !== id))
    }

    return { get: getTodos, create: addTodo, deleteTodo }
}