Getting Request failed with status code 403 error while fetching data from MongoDB

Question

When I try to fetch records from the database, it's giving me below mentioned error, I can't understand the error details. I wanted to fetch some data from database. My all keys are okay, there is no problem. In my http://localhost:5000/my gives me this error {"message": "Unauthorized Access"}

server side

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;
app.use(express.json());
var jwt = require("jsonwebtoken");
var cors = require("cors");
app.use(cors());
app.get("/", (req, res) => {
  res.send("Hello World!");
});

const { MongoClient, ServerApiVersion, ObjectId } = require("mongodb");
const uri =
  "mongodb+srv://laptop:[email protected]/myFirstDatabase?retryWrites=true&w=majority";
const client = new MongoClient(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  serverApi: ServerApiVersion.v1,
});
function verifyJWT(req, res, next) {
  const authHeader = req.headers.authorization;
  if (!authHeader) {
    return res.status(401).send({ message: "Unauthorized Access" });
  }
  const token = authHeader.split(" ")[1];
  jwt.verify(
    token,
    `54dab75ad712812022813833f08092641f7650a9ef862d82817f40b857448f186a64524bf05a425d218e0b12724fd53f91545b84e2bf0cc0cc387cbf85914aeb`,
    (err, decoded) => {
      if (err) {
      }
      return res.status(403).send({ message: "Forbidden Access" });
    }
  );
  console.log("inside verifyHWT", authHeader);
  next();
}
client.connect((err) => {
  async function run() {
    try {
      await client.connect();
      const serviceCollection = client.db("laptop").collection("service");
      const myCollection = client.db("laptop").collection("order");
      app.get("/service", async (req, res) => {
        const query = {};
        const cursor = serviceCollection.find(query);
        const services = await cursor.toArray();
        res.send(services);
      });
      app.get("/service/:id", async (req, res) => {
        const id = req.params.id;
        const query = { _id: ObjectId(id) };
        const service = await serviceCollection.findOne(query);
        res.send(service);
      });
      app.post("/service", async (req, res) => {
        const newService = req.body;
        const result = await serviceCollection.insertOne(newService);
        res.send(result);
      });
      app.put("/service/:id", async (req, res) => {
        const id = req.params.id;
        const updateUser = req.body;
        console.log(updateUser);
        const filter = { _id: ObjectId(id) };
        const options = { upset: true };
        const updateDoc = {
          $set: {
            quantity: updateUser.quantity,
          },
        };
        const result = await serviceCollection.updateOne(
          filter,
          updateDoc,
          options
        );
        res.send(result);
      });
      app.delete("/service/:id", async (req, res) => {
        const id = req.params.id;
        const query = { _id: ObjectId(id) };
        const result = await serviceCollection.deleteOne(query);
        res.send(result);
      });
      app.post("/my", async (req, res) => {
        const my = req.body;
        const result = await myCollection.insertOne(my);
        res.send(result);
      });
      app.get("/my", verifyJWT, async (req, res) => {
        const authHeader = req.headers.authorization;
        console.log(authHeader);
        const email = req.query.email;
        const query = { email };
        const cursor = myCollection.find(query);
        const services = await cursor.toArray();
        res.send(services);
      });

      //AUTH
      app.post("/login", (req, res) => {
        const user = req.body;
        const accessToken = jwt.sign(
          user,
          `54dab75ad712812022813833f08092641f7650a9ef862d82817f40b857448f186a64524bf05a425d218e0b12724fd53f91545b84e2bf0cc0cc387cbf85914aeb`,
          {
            expiresIn: "1d",
          }
        );
        res.send({ accessToken });
      });
    } finally {
    }
  }
  run().catch(console.dir);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

client side code

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useAuthState } from "react-firebase-hooks/auth";
import auth from "../firebaseInit";
import MyDetails from "../MyDetails/MyDetails";
const MyItem = () => {
  const [order, setOrder] = useState([]);
  console.log(order);
  const [user] = useAuthState(auth);
  useEffect(() => {
    const getOrders = async () => {
      const email = user.email;
      const url = `http://localhost:5000/my?email=${email}`;
      const { data } = await axios.get(url, {
        headers: {
          authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        },
      });
      // setOrder(data);
      console.log(data);
    };
    getOrders();
  }, [user]);
  return (
    <div>
      {order.map((product) => (
        <MyDetails product={product} key={product._id}></MyDetails>
      ))}
    </div>
  );
};

export default MyItem;

error

xhr.js:220 
 GET http://localhost:5000/[email protected] 403 (Forbidden)
dispatchXhrRequest  @   xhr.js:220
xhrAdapter  @   xhr.js:16
dispatchRequest @   dispatchRequest.js:58
request @   Axios.js:109
Axios.<computed>    @   Axios.js:131
wrap    @   bind.js:9
getOrders   @   MyItem.js:32
(anonymous) @   MyItem.js:40
commitHookEffectListMount   @   react-dom.development.js:23049
commitPassiveMountOnFiber   @   react-dom.development.js:24816
commitPassiveMountEffects_complete  @   react-dom.development.js:24781
commitPassiveMountEffects_begin @   react-dom.development.js:24768
commitPassiveMountEffects   @   react-dom.development.js:24756
flushPassiveEffectsImpl @   react-dom.development.js:26990
flushPassiveEffects @   react-dom.development.js:26935
(anonymous) @   react-dom.development.js:26725
workLoop    @   scheduler.development.js:266
flushWork   @   scheduler.development.js:239
performWorkUntilDeadline    @   scheduler.development.js:533

2nd error

AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code: "ERR_BAD_REQUEST"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message: "Request failed with status code 403"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response: {data: {…}, status: 403, statusText: 'Forbidden', headers: {…}, config: {…}, …}
[[Prototype]]: Error