I am building a TODO App using React JS. The item is not getting saved using React JS. Find the Code snippet of the App.js file below which contains the functions of saving item in local storage and getting item from local storage.

After refreshing the page, the data is vanishing from the UI as well as the local Storage.

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

function App() {

  const [inputText,setInputText]=useState("");

  const [todos,setTodos]=useState([]);

  const  [status,setStatus]=useState('');

  const [filteredTodos,setFilteredTodos]=useState([])

  useEffect(()=>{

    const getLocalTodos=()=>{
   
      if(localStorage.getItem('todos')===null){
        localStorage.setItem('todos',JSON.stringify([]));
      }
      
      else{
        let todoLocal = JSON.parse(localStorage.getItem('todos'))
      
        setTodos(todoLocal);
      }
        }

        getLocalTodos();

  },[]);


  useEffect(()=>{

    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;
  
      }
    }
  
    
    const saveLocalTodos=()=>{
  
    localStorage.setItem("todos",JSON.stringify(todos))
    }
    filterHandler()
    saveLocalTodos()
    console.log('hey');

  },[todos,status])

 
  return (
    <div className="App">
    
    <header>
      <h1>TODO List </h1>
      </header>

      <Form todos={todos} setTodos={setTodos} inputText={inputText} setInputText={setInputText} setStatus={setStatus} />
      <TodoList setTodos={setTodos} todos={todos} filteredTodos={filteredTodos} />
    </div>
  );
}

export default App;