Reactjs – React app not displaying fetched data but can be seen in the console

enter image description hereIn network tab, it shows a books file with 208 status code but can’t see any changes in the ui. I’m new to React and not so good at mapping over arrays.

Home.jsx ->

import React, { useEffect, useState } from "react";
import axios from "axios";
import Spinner from "./Spinner";
import { Link } from "react-router-dom";
import { AiOutlineEdit } from "react-icons/ai";
import { BsInfoCircle } from "react-icons/bs";
import { MdOutlineAddBox, MdOutlineDelete } from "react-icons/md";

const Home = () => {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    axios
      .get("http://localhost:5555/books")
      .then((response) => {
        setBooks(response.data);
        console.log(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
        setLoading(false);
      });
  }, []);
  return (
    <div className="p-4">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl my-8">Books Catalogue</h1>
        <Link to="/books/create">
          <MdOutlineAddBox className="text-sky-800 text-4xl" />
        </Link>
      </div>
      {loading ? (
        <Spinner />
      ) : (
        <table className="w-full border-separate border-spacing-2">
          <thead>
            <tr>
              <th className="border border-slate-600 rounded-md">No</th>
              <th className="border border-slate-600 rounded-md">Title</th>
              <th className="border border-slate-600 rounded-md max-md:hidden">
                Author
              </th>
              <th className="border border-slate-600 rounded-md max-md:hidden">
                Publish Year
              </th>
              <th className="border border-slate-600 rounded-md ">
                Operations
              </th>
            </tr>
          </thead>
          <tbody>
            {books?.map((book, index) => {
              <tr key={book._id} className="h-8">
                <td className="border border-slate-700 rounded-md text-center">
                  {index + 1}
                </td>
                <td className="border border-slate-700 rounded-md text-center">
                  {book.title}
                </td>
                <td className="border border-slate-700 rounded-md text-center max-md:hidden">
                  {book.author}
                </td>
                <td className="border border-slate-700 rounded-md text-center max-md:hidden">
                  {book.publishYear}
                </td>
                <td className="border border-slate-700 rounded-md text-center ">
                  <div className="flex justify-center gap-x-4">
                    <Link to={`/books/details/${book._id}`}>
                      <BsInfoCircle className="text-2xl text-green-800" />
                    </Link>
                    <Link to={`/books/edit/${book._id}`}>
                      <AiOutlineEdit className="text-2xl text-yellow-600" />
                    </Link>
                    <Link to={`/books/delete/${book._id}`}>
                      <MdOutlineDelete className="text-2xl text-red-600" />
                    </Link>
                  </div>
                </td>
              </tr>;
            })}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default Home;

index.js (backend) ->

import express from 'express';
import {PORT, MONGOURL} from './config.js';
import mongoose from 'mongoose';
import { Book } from './models/bookModel.js';
import booksRoute from './routes/booksRoute.js';
import cors from 'cors';

const app = express();
// middleware for parsing req body
app.use(express.json());
//middleware for cors policy

// app.use(cors());
app.use(
    cors({
        origin: 'http://localhost:5173',
        methods: ['GET', 'POST','PUT','DELETE'],
        allowedHeaders: ['Content-Type','Access-Control-Allow-Origin'],
        optionsSuccessStatus: 200
    })
);

// app.get('/', (req, res) => {
//     console.log(req);
//     return res.status(200).send('Welcome to Bookstore')
// });

app.use('/books', booksRoute);

mongoose.connect(MONGOURL)
  .then(() => {
    console.log('DB connection established')
    app.listen(PORT, () => {
        console.log(`Server is running on ${PORT}`)
    });
  })
  .catch((e) => {
    console.log(e);
  })

Routes ->

import express from "express";
import { Book } from "../models/bookModel.js";
const router = express.Router();

//Route for add a book to the db
router.post('/', async (req,res) => {
    try {
        if (
            !req.body.title || !req.body.author || !req.body.publishYear
        ) {
            return res.status(400).send({message: 'Send all required fields: title,author,publishYear'});
        }
        const newBook = {
            title: req.body.title,
            author: req.body.author,
            publishYear: req.body.publishYear
        };
        const book = await Book.create(newBook);
        return res.status(201).send(book);
        
    } catch (error) {
        console.log(error.message)
        res.status(500).json({message: error.message})
    }
});

//Route for get all books from the db
router.get('/', async (req,res) => {
    try {
        const books = await Book.find();
        return res.status(208).send(books);
    } catch (error) {
        res.status(500).send({message: error.message});
    }
});

//Route for get a single book from db
router.get('/:id', async (req,res) => {
    try {
        const {id} = req.params;
        const book = await Book.findById(id);
        res.status(200).send(book);
    } catch (error) {
        res.status(500).send({message: error.message});
    }
});

//Route for Update book params
router.put('/:id', async (req,res) => {
    try {
        if (
            !req.body.title || !req.body.author || !req.body.publishYear
        ) {
            return res.status(400).send({message: 'Send all required fields: title,author,publishYear'});
        }
        const {id} = req.params;
        const result = await Book.findByIdAndUpdate(id, req.body);
        if (!result) {
            res.status(404).send({message: 'Book not found'})
        }
        return res.status(201).send({message: 'Book updated Successfully'})
    } catch (error) {
        res.status(500).send({message: error.message});
    }
});

//Route for delete a book
router.delete('/:id', async (req,res) => {
    try {
        const book = await Book.deleteOne({_id: req.params.id});
        if (!book) {
            res.status(404).send('Book not found')
        } 
        res.status(200).send({message: 'Book deleted successfully'})
    } catch (error) {
        res.status(500).send({message: 'Inquiry error'});
    }
});

export default router

I want to display data as a table in the homepage and I’ve tried changing cors values and origins but still the same.