Show use state with expired date in reactJs

Question

I am not able to implement a expire function to my to do app. I have tried using an switch statement and then add a class to the element if its switched but it did not work. Ive also tried just changing the value of an useState and then adding the class from the state but the state didn't change correctly.

Here is my code:

app.js

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

import Form from './components/Form.js';
import ToDoList from './components/ToDoList';

function App() {

  //States
  const [inputText, setInputText] = useState("");
  const [inputTime, setInputTime] = useState("");
  const [inputDate, setInputDate] = useState("");

  const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || []);
  const [status, setStatus] = useState("all");
  const [filteredTodos, setFilteredTodos] = useState ([]);


  //useEffect
  useEffect(() => {
    saveLocalTodos();
    filterHandler();
    timeStatusHandler();
  }, [todos, status]);

  //Funktioner
  //Funktion för att visa olika uppgifter beroende på status
  const filterHandler = () => {
    switch(status){
      case 'completed':
        setFilteredTodos(todos.filter(todo =>todo.completed === true))
        break;
      case 'uncompleted':
        setFilteredTodos(todos.filter(todo =>todo.completed === false))
        break;
      default:
        setFilteredTodos(todos);
        break;
    }
  };

  
//save list localy
const saveLocalTodos = () => {
   localStorage.setItem('todos', JSON.stringify(todos));
};
  
  return (
    <div className="App">
      <Form 
        inputText={inputText}
        inputTime={inputTime}
        inputDate={inputDate}
        setInputText={setInputText}
        setInputTime={setInputTime}
        setInputDate={setInputDate}

        timeStatus={timeStatus}
        setTimeStatus={setTimeStatus}

        todos={todos} 
        setTodos={setTodos}  
        setStatus={setStatus}
      />
      <ToDoList 
        setTodos={setTodos} 
        todos={todos}
        filteredTodos={filteredTodos}
      />
    </div>
  );
}

export default App;

Form.js

import React from 'react';
import nextId from "react-id-generator";

const Form = ({setInputText, inputText, setInputTime, inputTime, setInputDate, inputDate, todos, setTodos,  setStatus, timeStatus, setTimeStatus}) =>{

    const inputTextHandler = (e) => {
        setInputText(e.target.value);
    };

    const inputTimeHandler = (e) => {
        setInputTime(e.target.value);
        console.log(e.target.value);

       var today = new Date();
       var curTime = today.getHours()+':'+today.getMinutes;

       if(curTime >= e.target.value){
        setTimeStatus("passed");
       }



    };




   const inputDateHandler = (e) => {
        setInputDate(e.target.value);

        console.log(inputDate);
    };


    const submitTodoHandler = (e) => {
        e.preventDefault();

        var todoId = nextId();
        
        setTodos([
            ...todos, {text: inputText,time: inputTime, date: inputDate, passed: false ,completed: false, id: todoId}
        ]);
        setInputText("");
        setInputTime("");
        setInputDate("");
    };

    const statusHandler = (e) => {
        setStatus(e.target.value);
    }

    return(
        <form>
            <input value={inputText} onChange={inputTextHandler} type="text" />

        

            <input value={inputTime} onChange={inputTimeHandler} type="time" />


            <button onClick={submitTodoHandler} type="submit">
                <i>Lägg till</i>
            </button>
            <div>
                <select onChange={statusHandler}>
                    <option value="all">All</option>
                    <option value="completed">Completed</option>
                    <option value="uncompleted">Uncompleted</option>
                </select>
            </div>
        </form>
    );
};

export default Form;

todolist.js

import React from "react";
import ToDo from './ToDo';

const ToDoList = ({todos, setTodos, filteredTodos}) => {

    return(
        <div>
            <ul>
                {filteredTodos.map(todo => (
                    <ToDo
                    todo={todo} 
                    setTodos={setTodos}
                    todos={todos} 
                    key={todo.id} 
                    text={todo.text}
                    time={todo.time}
                    date={todo.date}
                    />
                ))}
            </ul>
        </div>
    );
};

export default ToDoList;

todo.js

import React from "react";

const ToDo = ({text, time, date, todo , todos, setTodos}) => {

    const deleteHandler = () => {
        setTodos(todos.filter((el) => el.id !== todo.id));
    };

    const completeHandler = () => {
        setTodos(todos.map(item => {
            if(item.id === todo.id){
                return{
                    ...item, completed: !item.completed
                };
            }
            return item;
        }))
    }
    


    return(
        <div className={`${todo.passed ? "passed": ''}`}>
            <li className={`${todo.completed ? "completed": ''}`}>
                {text + ' ' + date + ' ' + time}
            </li>
            <button onClick={completeHandler}>check</button>
            <button onClick={deleteHandler}>delete</button>
        </div>
    );
};

export default ToDo;