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

Question

[Александр Шоу]

Это компонент где выполняю действие

export const InputCard:React.FC<inputOpenType > = ({setOpen,type,boardId}) => {
    const classes = useStyles()
    const [title,setTitle] = useState<string>('')

    const dispatch = useDispatch()
    const addBoards= (title:string) => dispatch(addBoard(title))
    const addCards = (card:cardsState) => dispatch(addCard(card))




    const handleAddBoard = (title:string ) => {
        console.log('click board')
        addBoards(title)
        }

    const handleOnChange = (event:React.ChangeEvent<HTMLInputElement>) => {
        setTitle(event.target.value)
    }

    const handleBtnAddBoard = ():void => {
        if(type === 'board') {
            handleAddBoard(title)
            setTitle('')
        }else if(type === 'card') {
            let card = {
                info: title,
                id:boardId
            }
            addCards(card)
            setTitle('')
        }

    }

    return (
        <div>
            <div >
                <Paper className={classes.card} >
                    <InputBase
                        onBlur={() => setOpen(false)}
                        onChange={handleOnChange}
                        multiline
                        fullWidth
                        placeholder={'Добавить'}
                        value={title}
                    />
                </Paper>
            </div>
            <div className={classes.btnBlock}>
                <Button
                    className={classes.btnSetting}
                    onClick={handleBtnAddBoard}
                >Добавить</Button>
                <IconButton onClick={() => setOpen(false)}>
                    <ClearIcon  />
                </IconButton>
            </div>
        </div>
    )
}

Это редюсер использую Redux Toolkit

const boardsRedux = createSlice({
    name: "Boards",
    initialState : initialState,
    reducers: {
        addBoard(state:IBoardsState, action:PayloadAction<string>)  {
            let boardId = uuid()
            let board = {
                id:  boardId,
                title:action.payload ,
                cards: []
            }
            state.boards.push(board)
        },
        addCard(state:IBoardsState,action:PayloadAction<cardsState>) {
            const { id, info} = action.payload
            const { boards} = state
            let newCard = {
                id: uuid(),
                info: info
            }
            boards.map((board) => {
                if(board.id === id) {
                    board.cards.push(newCard)
                }
            })
        }}
})

export default boardsRedux.reducer
export  const {addBoard, addCard } = boardsRedux.actions

И сам initial state

export const initialState:IBoardsState = {
    boards: [
        {
            id: "23",
            title: "I am board",
            cards: [
                {
                    id: "1",
                    info: "This task number one"
                },
                {
                    id: "2",
                    info: "This task number two"
                },
            ]

        },
        {
            id: "21",
            title: "I am board two",
            cards: [
                {
                    id: "12",
                    info: "This task number free"
                },
                {
                    id: "15",
                    info: "This task number four"
                },
            ]

        },
    ]
}

Почему при первом клике на кнопку все работает но при втором клике добавление происходит только со второго раза ?Использую React TypeScript Redux Tllokit