Unable to display mysql query result in the browser with axios in react

I was trying to retrieve data from database and display it in the browser on button click but I always receive this error (Uncaught Error: Objects are not valid as a React child (found: object with keys {studentId, firstName, surName, otherName, state, localGovt, phoneNumber, imgUrl}). If you meant to render a collection of children, use an array instead.). I was able to see the data when I use console.log, but failed in the DOM.

Here is the code on the frontend.

import Axios from "axios";
import { useState, useEffect } from "react";

const SearchUsers = () => {
  const [input, setInput] = useState("");
  const [studentResult, setStudentResult] = useState([]);

  const handleSearch = async () => {
    //const sanitizedInput = input.trim().toUpperCase();

    try {
      const { data } = await Axios.get("http://localhost:3500/students");
      const { result } = data; // this is an array
      console.log(result)//this works. it displays array of objects with the data from the db
        setStudentResult(result);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <div className="flex flex-col w-2/4 mx-auto my-20">
        <div>
          <input
            className="input w-full"
            type="text"
            name="search"
            placeholder="Search a Student"
            onChange={(e) => setInput(e.target.value)}
          />
        </div>
        <div className="flex justify-center mt-5">
          <button
            type="button"
            className="btn shadow shadow-gray-500"
            onClick={handleSearch}
          >
            Get All Students
          </button>
        </div>

        <div>
          {studentResult.map((item, index) => {
            return (
              <div key={index}>
                <p>{item.firstName}</p>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};
export default SearchUsers;

Here is code on the backend. It's a controller function that retrieves all data from the database

const getAllStudents = (req, res) => {
  const selectAll = "SELECT * FROM students";

  studentDB.query(selectAll, (err, result) => {
    res.sendStatus(200).json({ result: result });
  });
};