React: How filter data with buttons

Question

I am new to learning React and TypeScript and I've been following this tutorial https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering to filter a todo list with buttons. I have this error when I try to filter the list.

 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ All: () => boolean; Active: (task: TaskItem) => boolean; Completed: (task: TaskItem) => boolean; }'.
  No index signature with a parameter of type 'string' was found on type '{ All: () => boolean; Active: (task: TaskItem) => boolean; Completed: (task: TaskItem) => boolean; }'.
    49 |       ))}
    50 |
  > 51 |       {tasks.filter(FILTER_MAP[filter]).map((task) => (
       |                     ^^^^^^^^^^^^^^^^^^
    52 |         <TaskList tasks={tasks} setTasks={setTasks} key={task.id} />
    53 |       ))}

I think it's because FILTER_MAP as properties of type boolean and filter is a string, but I don't know how to fix it. Does anyone have any advice? Thanks

import React, { useState } from "react";
import "./App.css";
import AddTask from "./components/AddTask";
import { TaskItem } from "./common/models";
import TaskList from "./components/TaskList";
import FilterButton from "./components/FilterButton";

const FILTER_MAP = {
  All: () => true,
  Active: (task: TaskItem) => !task.isCompleted,
  Completed: (task: TaskItem) => task.isCompleted,
};

const FILTER_NAMES = Object.keys(FILTER_MAP);

const App: React.FC = () => {
  const [task, setTask] = useState<string>("");
  const [tasks, setTasks] = useState<TaskItem[]>([]);
  const [filter, setFilter] = useState("All");

  const handleAddTask = (e: React.FormEvent) => {
    e.preventDefault();

    if (task) {
      setTasks([
        ...tasks,
        {
          id: Date.now(),
          task,
          isCompleted: false,
        },
      ]);
    }
    setTask("");
  };

  return (
    <div className="App">
      <span className="task-header">Task Tracker</span>
      <AddTask task={task} setTask={setTask} handleAddTask={handleAddTask} />
      {FILTER_NAMES.map((task) => (
        <FilterButton
          key={task}
          task={task}
          isPressed={task === filter}
          setFilter={setFilter}
        />
      ))}

      {tasks.filter(FILTER_MAP[filter]).map((task) => ( 
        <TaskList tasks={tasks} setTasks={setTasks} key={task.id} />
      ))}
    </div>
  );
};

export default App;