I store my JWT token in HttpOnly Cookie. So that now I can’t able to accesss it Without HttpOnly Cookie (without jwt token) also the CRUD operations are performing. Can someone explain the need of JWT token and how to use it. Also help to solve the problem in mern stack which i provided the code below.

FRONTEND NoteX.jsx

import React, { useState, useEffect } from 'react'
import axios from 'axios';

import '../Assests/css/NoteX.css'
import '../Assests/css/colors.css'

const NoteX = () => {
  
  const [showPopup, setShowPopup] = useState(false);

  const [heading, setHeading] = useState()
  const [note, setNote] = useState()

  const [mynotes, setMynotes] = useState([]);
  const [isUpdate,setIsUpdate] = useState(false);
  const [selectedNoteId,setSelectedNoteId] = useState(null);


  const handleAddNotes = () => {
    setShowPopup(true);
    setSelectedNoteId(null);
    setIsUpdate(false);
  }

  const handleCloseAddNotes = () => {
    setShowPopup(false);
    setHeading("");
    setNote("");
  }

  const submitNote = (e) => {
    e.preventDefault();
    if(isUpdate)
    {
      axios.put(`http://localhost:3001/api/notes/updateNote/${selectedNoteId}`, { heading, note })
      .then(
        result => {
          setShowPopup(false);
          setSelectedNoteId(selectedNoteId);
          setIsUpdate(true);
          fetchNotes();
          setNote("")
          setHeading("")
        })
      .catch(err => console.log(err))
    }
    else
    {
      axios.post("http://localhost:3001/api/notes/createNotes", { heading, note })
        .then(
          result => {
            // console.log(result)
            setNote("")
            setHeading("")
            fetchNotes();
          })
        .catch(err => console.log(err))
    }
  }

  const fetchNotes = () => {
    axios.get("http://localhost:3001/api/notes/getNotes")
      .then(result => {
        setMynotes(result.data);
      })
      .catch(err => console.log(err))
  }

  useEffect(() => {
    fetchNotes()
  }, [])

  const updateNotes = (noteId) => {
    axios.get(`http://localhost:3001/api/notes/getNote/${noteId}`)
      .then(result => {
        setIsUpdate(true);
        setShowPopup(true);
        setSelectedNoteId(noteId);
        setHeading(result.data.heading);
        setNote(result.data.note);
        // console.log(result.data);
      })
      .catch(err => console.log(err))
  }

  const deleteNotes = (noteId) => {
    axios.delete(`http://localhost:3001/api/notes/deleteNote/${noteId}`)
    .then(result=>fetchNotes())
    .catch(err=>console.log(err))
  }

  return (
    <div>
      <div className='search'>
        <input type='search' placeholder='Search..' />
      </div>

      <div className="notex-container">
        <button className='add-notes-button' onClick={handleAddNotes}>Add notes</button>
      </div>

      {
        showPopup && (
          <div className="add-notes-popup">
            <div className="add-notes-popup-content">
              <span className="close-add-notes" onClick={handleCloseAddNotes}>×</span>
              <h2>{isUpdate ? 'Edit Note' : 'Add Note'}</h2>
              <input type="text" placeholder='Notes heading..' name='heading' value={heading} onChange={(e) => setHeading(e.target.value)} />
              <textarea type="text" placeholder='Add a note..' name='note' value={note} onChange={(e) => setNote(e.target.value)} />
              <button onClick={submitNote}>{isUpdate ? 'Update Note' : 'Add Note'}</button>
            </div>
          </div>
        )
      }

      <div>
        {
          mynotes.map((note, index) => {
            return <div key={index} className="view-notes">
              <h3>{note.heading}</h3>
              <p>{note.note}</p>
              <p>{note.created_at}</p>
              <button onClick={() => updateNotes(note._id)}>Update note</button>
              <button onClick={()=>deleteNotes(note._id)}>Delete</button>
            </div>
          })
        }
      </div>
    </div>
  )
}

export default NoteX

//server side
//note.js

const router = require('express').Router();

const noteModel = require('../model/note');

router.get("/getNotes", async(req,res)=>{
    noteModel.find({})
    .then(note=>res.json(note))
    .catch(err=>res.json(err))
})

router.post("/createNotes" , async(req,res)=>{
    noteModel.create(req.body)
    .then(note=>res.json(note))
    .catch(err=>res.json(err))
})

router.get("/getNote/:id" , async(req,res)=>{
    const id = req.params.id;
    noteModel.findById(id)
    .then(note=>res.json(note))
    .catch(err=>res.json(err))
})

router.put("/updateNote/:id" , async(req,res)=>{
    const id = req.params.id;
    noteModel.findByIdAndUpdate(id,req.body)
    .then(note=>res.json(note))
    .catch(err=>res.json(err))
})

router.delete("/deleteNote/:id" , async(req,res)=>{
    const id = req.params.id;
    noteModel.findByIdAndDelete(id,req.body)
    .then(note=>res.json(note))
    .catch(err=>res.json(err))
})

module.exports = router

If I delete the cookie by inspecting where I store my token the CRUD should not perform