Почему не работает React.Context and Typescript?

Question

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

Вспомогательный файл

import React from "react";
export default React.createContext({handleAddCard: (title:string) => {}});

Файл откуда передаем функцию

const handleAddCard = (title:string) => {
        let boardId = keysToId()
        addCards(title,boardId)
    }


 

    return (
       <functionApi.Provider value={{handleAddCard}}>
           <Paper className={classes.listComponent}>
               <Title/>
               <Card/>
               <Card/>
               <Card/>
               <Card/>
               <InputContainer type='card'/>


           </Paper>
       </functionApi.Provider>
    )
}

и файл где принимает и требуется передать полученный title

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

    const handleBtnAddBoard = (event:SyntheticEvent) => {
        event.preventDefault()
        handleAddCard('1212')
    }

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

Хочу передать с помощью функции handleBtnAddBoard title в родительский компонент но она ни как не реагирует, думаю дело в типизации но не могу разобраться