Хочу при нажатии на кнопку скрывать элемент массива как бы в "disabled"

Обычный ToDo App проект для себя. С удалением одного элемента массива из списка элементов вроде понятно все. Но не могу понять как реализовать функцию, которая будет изменять один элемент, делая его как бы "disabled", чтобы весь инпут становился прозрачным, и оставались только серый бордер с текстом внутри. Так же при повторном нажатии нужно, чтобы компонент снова становился нормальным.

import TodoForm from "./components/Todos/TodoForm"
import TodoList from "./components/Todos/TodoList"
import "./App.css"

function App() {
    const [todos, setTodos] = userState([])
    const addTodoHandler = (text) => {
        setTodos([...toods, text])
    }

    const deleteTodoHandler = (index) => {
        setTodos(todos.filter((_, idx) => idx !== index))
    }
    
    const completeTodoHandler = () => {}

    return (
        <div className="App">
            <h1>Todo App</h1>
            <todoForm addTodo={addTodoHandler} />
            <todoList
                 todos={todos}
                 deleteTodo={deleteTodoHandler}
                 completeTodo={completeHandler}
            />
        </div>
    )
}

export default App

Рендер списка компонентов:

import Todo from "./Todo"
import styles from "./TodoList.module.css"

function TodoList({ todos, deleteTodo, completeTodo }) {
  return (
    <div className={styles.todoListContainer}>
      {!todos.length && <h2>Todo list is empty</h2>}
      {todos.map((todo, index) => (
        <Todo
          key={index}
          todo={todo}
          index={index}
          deleteTodo={deleteTodo}
          completeTodo={completeTodo}
        />
      ))}
    </div>
  )
}

export default TodoList

Сам компонент:

import { RiTodoFill } from "react-icons/ri"
import { FaTrash } from "react-icons/fa"
import { BsCheckSquareFill } from "react-icons/bs"
import styles from "./Todo.module.css"

function Todo({ todo, index, deleteTodo, completeTodo }) {
  return (
    <div className={styles.todo}>
      <RiTodoFill className={styles.todoIcon} />
      <div className={styles.todoText}>{todo}</div>
      <FaTrash
        className={styles.todoIconDelete}
        onClick={() => deleteTodo(index)}
      />
      <BsCheckSquareFill
        className={styles.todoIconComplete}
        onClick={() => completeTodo(index)}
      />
    </div>
  )
}

export default Todo