I’m encountering an issue in my project where the local storage data is getting cleared after a user logs out. I’ve implemented a logout functionality, but I can’t seem to pinpoint why the local storage is being cleared during this process.

I’ve checked my logout function and verified that it doesn’t explicitly clear the local storage. Additionally, I’ve ensured that the data stored in local storage is indeed persisting during regular usage of the applicatio

import React, { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';
import NotesList from './NotesList';
import Search from './Search';
import Header from './Header';
import '../index.css'
function Main() {
    const [notes, setNotes] = useState([]);

    const [searchText, setSearchText] = useState('');
    const [darkMode, setDarkMode] = useState(false);
    const [selectedNote, setSelectedNote] = useState(null);
    
    useEffect(() => {
        const savedNotes = JSON.parse(
            localStorage.getItem('react-notes-app-data')
        );
        console.log(savedNotes);
        if (savedNotes) {
            setNotes(savedNotes);
        }
    }, []);

    useEffect(() => {
        localStorage.setItem(
            'react-notes-app-data',
            JSON.stringify(notes)
        );
    }, [notes]);

    const addNote = (text) => {
        const date = new Date();
        const newNote = {
            id: nanoid(),
            text: text,
            date: date.toLocaleDateString(),
        };
        const newNotes = [...notes, newNote];
        setNotes(newNotes);
    };

    const deleteNote = (id) => {
        const newNotes = notes.filter((note) => note.id !== id);
        setNotes(newNotes);
    };

    const editNote = (id, newText) => {
        const editedNotes = notes.map((note) =>
            note.id === id ? { ...note, text: newText } : note
        );
        setNotes(editedNotes);
        setSelectedNote(null); // Reset selected note after editing
    };

    return (
        <div className={`${darkMode && 'dark-mode'}`}>
            <div className='container'>
                <Header handleToggleDarkMode={setDarkMode} />
                <Search handleSearchNote={setSearchText} />
                <NotesList
                    notes={notes.filter((note) =>
                        note.text.toLowerCase().includes(searchText)
                    )}
                    handleAddNote={addNote}
                    handleDeleteNote={deleteNote}
                    handleEditNote={editNote}
                    selectedNote={selectedNote}
                    setSelectedNote={setSelectedNote}
                />
            </div>
        </div>
    );
};

export default Main;

// Home.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
import Main from '../Components/Main';



const Home = ({ loggedIn, setLoggedIn }) => {

  const loggedInUser = localStorage.getItem('loggedInUser');
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.removeItem('loggedInUser'); // Remove logged-in user from local storage
    setLoggedIn(false);
    navigate('/');
  };
  const savedNotes = JSON.parse(
    localStorage.getItem('react-notes-app-data')
  );

  return (
    <div>
      <h2>Welcome to Home Page</h2>
      {loggedIn ? (
        <>
          <p>Welcome, {loggedInUser}!</p>
          <button onClick={handleLogout}>Logout</button>
          <Main/>
        </>
      ) : (
        <p>Please login to access the home page</p>
      )}
    </div>
  );
};


export default Home;

Despite these efforts, the local storage data continues to vanish upon logout, contrary to my expectations. I’m seeking insights or suggestions on potential reasons for this unexpected behavior.