Open Modal on OnClick of button in React Js with multiple functions on Onclick

Question

I want to open Modal on Onclick of a button but with blur effect on other elements and setting modal displayNone to false. How can I achieve these 3 functions with the same button click? Actually, The main problem is the blur effect and the Display none is dependent on OpenModal. So on the OnClick function, these 3 are executing simultaneously, So I can't be dependent on openModal. so how can I achieve this?

ModalContext.js

ModalContext.js

import { createContext, useState } from "react";

const ModalContext = createContext();

export default ModalContext;

export const ModalProvider = ({ children }) => {
  const [openModal, setOpenModal] = useState(false);
  const [blurClass, setBlurClass] = useState(false);
  const [displayNone, setDisplayNone] = useState(true);

  const HandleSwitch = () => {
    if (openModal) {
      setBlurClass(true);
      setDisplayNone(false);
    }
    else {
      setBlurClass(false);
      setDisplayNone(true);
    }
  };

  console.log("openModal", openModal);
  console.log("displayNone", displayNone);
  console.log("blurClass", blurClass);

  return (
    <ModalContext.Provider
      value={{
        openModal,
        setOpenModal,
        blurClass,
        setBlurClass,
        displayNone,
        setDisplayNone,
        HandleSwitch,
      }}
    >
      {children}
    </ModalContext.Provider>
  );
};

AddTaskBtn.jsx

import { AiOutlinePlus } from "react-icons/ai";
import { useContext } from "react";
import ModalContext from "../Context/ModalContext";

function AddTaskBtn({ children }) {
  const { setOpenModal, openModal, displayNone, HandleSwitch, blurClass } =
    useContext(ModalContext);

  console.log("openModal", openModal);
  console.log("displayNone", displayNone);
  console.log("blurClass", blurClass);

  return (
    <button className="add-item">
      {children}
      <AiOutlinePlus
        className="add-icon"
        onClick={() => {
          setOpenModal(true);
          HandleSwitch();
        }}
        size={25}
      />
    </button>
  );
}

export default AddTaskBtn;

TodoList.jsx

import Slide from "./Slide";
import TodoForm from "./TodoForm";
import { useContext, useState } from "react";
import todoData from "../Data/DefaultTodoData";
import ModalContext from "../Context/ModalContext";

function TodoList() {
  const [todos, setTodos] = useState(todoData);
  const { openModal, blurClass, displayNone } = useContext(ModalContext);

  console.log("openModal", openModal);
  console.log("displayNone", displayNone);
  console.log("blurClass", blurClass);

  const addTodo = (todo) => {
    if (todo.title && todo.task) {
      const newTodos = [todo, ...todos];
      setTodos(newTodos);
    }
  };

  const DeleteTodo = (id) => {
    const removeArr = todos.filter((todo) => todo.id !== id);
    setTodos(removeArr);
  };

  const EditTodo = (todoId, newValue) => {
    if (newValue.title && newValue.task) {
      setTodos((prev) =>
        prev.map((item) => (item.id === todoId ? newValue : item))
      );
      console.log(newValue);
    }
  };

  return (
    <>
      <div className={displayNone ? "form-container d-none" : "form-container"}>
        {/* <div className="form-container"> */}
        {openModal && <TodoForm onSubmit={addTodo} />}
      </div>
      <div
        className={blurClass ? "is-blurred main-container" : "main-container"}
        // className="main-container"
      >
        <Slide todos={todos} DeleteTodo={DeleteTodo} EditTodo={EditTodo} />
      </div>
    </>
  );
}

export default TodoList;

TodoList.jsx

I did not frame the question correctly, Hope you guys understand the problem from the screenshots. I really appreciate any help you can provide.