Promise Fulfilled But Still Pending

Question

I'm writing a function that sends a POST request to my backend API and returns the response as data. I need to use a POST request because I need to send information to the backend. I'm using async/await syntax.

When I console log the data inside the function definition, it clearly shows a resolved promise because the data is logged as an array.

(491) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]

However, when I actually call the function, it returns a promise that is fulfilled, with the results (!!), but still pending.

Promise {<pending>}
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: Array(491)

I also can't use "await" outside of the function definition so that doesn't work. I've also tried using .then() after the function call but it doesn't work either.

My frontend is also throwing this error:

TypeError: data.slice is not a function

When I console.log the type of the data variable, I get:

object

Here's my code. Please help!

import { useState, useEffect } from "react"
// import { useLoaderData } from "react-router-dom"
import ReactPaginate from "react-paginate"
import Record from "../components/Record"
import FieldName from "../components/FieldName"

const Index = (props) => {
    // let data = useLoaderData()

    const fetchRecords = async (currentPage) => {
        const response = await fetch("https://medwallet-backend.onrender.com/data", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                currentPage: currentPage
            })
        })

        const data = await response.json()
        return await data
    }

    const [currentPage, setCurrentPage] = useState(1)

    const data = fetchRecords(currentPage).then((data) => {return data})

    const recordsPerPage = 10
    const lastIndex = currentPage * recordsPerPage
    const firstIndex = lastIndex - recordsPerPage
    const records = data.slice(firstIndex, lastIndex)
    const numPages = Math.ceil(data.length / recordsPerPage)

    const handlePageClick = (e) => {
        const page_number = e.selected + 1
        setCurrentPage(page_number)
    }
 
    return <div className="index-container">
            <div className="field-names">
                {fieldNames.map((fieldName) => 
                    <FieldName fieldName={fieldName} key={fieldName} />
                )}
            </div>

            <div className="records">
                {records.map((record) => 
                    <Record record={record} key={record.record_id}/>
                 )}
            </div>

            <ReactPaginate
                previousLabel={"Prev"}
                nextLabel={"Next"}
                breakLabel={"..."}
                pageCount={numPages}
                marginPagesDisplayed={2}
                pageRangeDisplayed={3}
                onPageChange={handlePageClick}
                containerClassName={"pagination justify-content-center"}
                pageClassName={"page-item"}
                pageLinkClassName={"page-link"}
                previousClassName={"page-item"}
                previousLinkClassName={"page-link"}
                nextClassName={"page-item"}
                nextLinkClassName={"page-link"}
                breakClassName={"page-item"}
                breakLinkClassName={"page-link"}
                activeClassName={"active"}
            />

    </div>
}

export default Index```