Ошибка в React: Uncaught TypeError: Cannot read properties of undefined (reading 'deleteCompletedTask') в компоненте TasksFilter

У меня возникла проблема при разработке приложения на React. У меня есть компонент TasksFilter, который использует контекст для доступа к функции deleteCompletedTask. Когда я пытаюсь вызвать эту функцию в компоненте TasksFilter, возникает ошибка "Uncaught TypeError: Cannot read properties of undefined (reading 'deleteCompletedTask')".

Я создал контекст в NewTaskForm, где определил эту функцию и передал ее через FilterContext.Provider в TasksFilter. В компоненте TasksFilter я пытаюсь получить доступ к этой функции через context, но получаю ошибку.

// NewTaskForm.js
// ...
<FilterContext.Provider
  value={{ deleteCompletedTask: this.deleteCompletedTask.bind(this) }}
>
  {/* ... */}
</FilterContext.Provider>
// ...





// TasksFilter.js
// ...
<button className="clear-completed" onClick={this.context.deleteCompletedTask}>
  Clear completed
</button>
// ...

Я не могу понять, почему возникает эта ошибка, и как ее исправить. Буду благодарен за любую помощь в разрешении этой проблемы.

Спасибо!