Why is React.Context and Typescript not working?

Question

typescript

Help file

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

File from where we pass the function

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>
    )
}

and the file where it accepts and needs to pass the received 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>
    )
}

I want to pass the title to the parent component using the handleBtnAddBoard function, but it doesn’t react in any way, I think it’s a matter of typing, but I can’t figure it out