Что делать если UseState меняется со 2 нажатия?

Question

[holfizz]

у меня есть

const [modalActive, setModalActive] = useState(false)

при клике

onClick={()=>{
   setModalActive(true)
   createModal()
   console.log(modalActive)
}}

в консоль выводиться при первом клике false а при повторном true в чем может быть дело
модальное окно появляется со 2 нажатия
вот весь код если где-то грязно сори)) учусь

import React, {useEffect, useState} from 'react';
import cl from './style.module.css'

const Post = ({todos, deleteTodo, modal}) => {
    const [modalActive, setModalActive] = useState(false)
    function createModal(){
        modal(modalActive)
    }

    return (
        <div >

            {todos.map((item, index)=>{
                return (
                    <li className={cl.post}
                        key={index}>{index+1}: {item.title}
                        <div>
                            <button

                                onClick={()=>{
                                    deleteTodo(item)
                                }}
                                style={{ cursor:'pointer', background:'red'}}>
                                delete
                            </button>
                            <button className={cl.button}
                            onClick={()=>{
                                setModalActive(true) тут при клике должно появиться модально окно а оно появляется при повторном клике
                                createModal()
                                console.log(modalActive)
                            }}
                            >
                                ред.
                            </button>
                        </div>

                    </li>

                )
            })}
        </div>
    );
};

export default Post;

import React from 'react';
import cl from './style.module.css'

const Modal = ({active}) => {
    return (
        <div style={{display: active ? 'flex' : 'none'}} className={cl.modal}>
            
            
            <h1>изменить todo № </h1>
            <input></input>

        </div>
    )
};

export default Modal;

import React, {useEffect, useState} from 'react';
import Post from "./UI/Post/Post";
import cl from './assets/style.css'
import Modal from "./UI/modal";

const App = () => {
    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || [
        {id:1, title:'123'},
        {id:2, title:'321'},
        {id:3, title:'213'},

    ])
    const [todo, setTodo] = useState({title: '', id:''})
     function newTodo () {
         if(todo.title){
             setTodos([...todos, todo])
             setTodo({title: '', id:''})

        }

    }
    function onEnter(e){
        if(todo.title){
            if(e.key === 'Enter'){
                setTodos([...todos, todo])
                setTodo({title: '', id:''})
            }
        }
    }
    function deleteTodo (text){
        setTodos(todos.filter((item )=> item !== text))
    }
    useEffect(()=>{
        localStorage.setItem('todos', JSON.stringify(todos))
    }, [todos])
    const [modalActive, setModalActive] = useState(false)
    function createModal(modal) {
        setModalActive(modal)
    }

    return (
        <div className={cl}>

                <input
                    onKeyDown={onEnter}
                    maxLength={20}
                    onChange={(e)=>{
                        setTodo({title:e.target.value, id:''})}
                    }
                    value={todo.title}
                >
                </input>
                <button
                    onClick={()=>{
                        newTodo()
                    }}


                >click
                </button>
                <ul>
                    <Post modal={createModal} deleteTodo={deleteTodo} todos={todos}></Post>
                </ul>
            <Modal active={modalActive}></Modal>

        </div>
    );
};

export default App;