I’m using a useEffect hook which includes a delete function in it. Before including the delete function in the useEffect hook my code was working fine and I was able to navigate between different object data without any worries. Since calling the function in the hook I get the error ‘Cannot read property ‘title’ of undefined’

I have tried to use a useCallBack hook incase the function variables change through user interaction and I’ve also included default values for the object, index for each object in the array and object properties in case some of these values were not accessible to the useEffect hook during the initial render. Both efforts still produce the same error. Here is the relevant code:

//Default Values
 //Note list index use state.
  const [index, setIndex] = useState(0);
  //List of notes use state.
  const [noteList, editNoteList] = useState([
    {
      title: 'First Note',
      text: 'This is my first note on the app :)',
      expiry: new Date(),
    },
    {
      title: 'Test 2',
      text: 'This is my first note on the app :)',
      expiry: new Date(),
    },
    {
      title: 'Test 3',
      text: 'This is my first note on the app :)',
      expiry: new Date(),
    },
  ]);


const Timer = () => {
  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
  //Index use state.
  const { index, setIndex } = useContext(IndexContext);
  //List of notes use states.
  const { noteList, editNoteList } = useContext(NoteListContext);
  //Set inital value of noteList if undefined.
  const initialNote = noteList[index] || {};
  //Set initial expiryDate to current date if initialNote.expiry is undefined
  const initialExpiryDate = initialNote.expiry || new Date();
  const [expiryDate, setExpiryDate] = useState(initialExpiryDate);
  //Set other states dependent on noteList[index] conditionally. Set initial title to an empty string if initialNote.title is undefinedSet initial title to an empty string if initialNote.title is undefined
  const [title, setTitle] = useState(initialNote.title || '');
  const [content, setContent] = useState(initialNote.content || '');

//Delete function and useEffect hook.
  //Delete note function using useCallback.
  const deleteNote = useCallback(() => {
    const noteListToEdit = [...noteList];
    noteListToEdit.splice(index, 1);
    editNoteList(noteListToEdit);
    saveNotes(noteListToEdit);
  }, [index, noteList, editNoteList]);

  useEffect(() => {
    const calculateTimeUnits = (timeDifference) => {
      const seconds = Math.floor(timeDifference / 1000);
      setTimeUnits({
        days: Math.floor((seconds % (365 * 24 * 60 * 60)) / (24 * 60 * 60)),
        hours: Math.floor((seconds % (24 * 60 * 60)) / (60 * 60)),
        minutes: Math.floor((seconds % (60 * 60)) / 60),
        seconds: seconds % 60,
      });
    };

    const updateCountdown = () => {
      const currentDate = new Date().getTime();
      const expiryTime = expiryDate.getTime();
      const timeDifference = expiryTime - currentDate;

      if (timeDifference <= 0) {
        calculateTimeUnits(0);
        deleteNote();
        //navigation.navigate('Recent Notes');
      } else {
        calculateTimeUnits(timeDifference);
      }
    };

    updateCountdown();

    const interval = setInterval(updateCountdown, 1000);

    return () => clearInterval(interval);
  }, [expiryDate, deleteNote]);