I'd approach this by storing an array of todo objects in state with useState(), and maintain a selected property for each todo. As the todos are clicked, the selected property is changed.

To limit the selections to 4, simply add a check with a count like below.

CodeSandbox demo

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [todos, setTodos] = useState([
    { id: "1", name: "Task 1", selected: true },
    { id: "2", name: "Task 2", selected: false },
    { id: "3", name: "Task 3", selected: false },
    { id: "4", name: "Task 4", selected: false },
    { id: "5", name: "Task 5", selected: false }
  ]);

  const todoClicked = (e) => {
    // max 4 selected
    if (!e.target.classList.contains("selected")) {
      const selectedCount = todos.filter((todo) => todo.selected).length;
      if (selectedCount === 4) {
        return;
      }
    }

    setTodos(
      todos.map((todo) =>
        todo.id === e.target.getAttribute("data-id")
          ? { ...todo, selected: !todo.selected }
          : todo
      )
    );
  };

  return (
    <div>
      {todos.map((todo) => (
        <div
          onClick={todoClicked}
          data-id={todo.id}
          key={todo.id}
          className={`todoDiv${todo.selected ? " selected" : ""}`}
        >
          {todo.name}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));

I have added a TASK_LIST to dynamically render the div. Here toggleTask function will both select & de-select the div. And as you said, maximum of four div will be selected.

import { Fragment, useState } from "react";

const TASK_LIST = [1, 2, 3, 4, 5];

export default function MultiSelect() {
  const [selectedTask, selectTask] = useState([]);

  const isSelected = (taskId) => {
    return selectedTask.filter((task) => task === taskId).length;
  };

  const toggleTask = (taskId) => {
    if (isSelected(taskId)) {
      // deselect div
      selectTask((tasks) => tasks.filter((ts) => ts !== taskId));
    } else if (selectedTask.length < 4) {
      // select div, max four div will be selected
      selectTask((tasks) => [...tasks, taskId]);
    }
  };

  return (
    <Fragment>
      {TASK_LIST.map((task) => (
        <div
          className={`todoDiv${isSelected(task) ? " select" : ""}`}
          key={task}
          onClick={() => toggleTask(task)}
        >
          Task{task}
        </div>
      ))}
    </Fragment>
  );
}

In Reactjs, we use state to keep track of and render the view of the component. In your case, we can create a state called selected which maintains the list of selected tasks.

import React, {useState, useEffect} from 'react';
import './App.css';

function App() {
  const [selected, setSelected] = useState([])
  const updateSelected = (task) => {
    if(!selected.includes(task) && selected.length < 4) {
      let newSelected = [...selected, task];
      setSelected(newSelected)
    } else {
      let newSelected = selected.filter(t => t !== task)
      setSelected(newSelected)
    }
  }
  let tasks = ["Task1", "Task2", "Task3", "Task4", "Task5"]
  return (
    <main>
      {
        tasks.map(task => (
          <div onClick={() => updateSelected(task)} className={`todoDiv ${selected.includes(task) ? 'select' : ''}`}>{task}</div>
        ))
      }
      {`selected = ${selected.join(", ")}`}
    </main>
  );
}

export default App;

Initally, it is empty. When the user clicks on a task, it is added to the list of selected tasks. In the updateSelected, we implement required logic as shown above. Notice in the className for each task we use JaveScript template strings. This helps us to conditionally add class 'selected' to the className if it is selected by the user.