I'm trying to load a new page with characters and push them to the main massive, but it always returnes Promise, so I can't do it

import React, { useState } from 'react';
import { PersonCard } from './PersonCard';
import { getPersons } from '../../../apies/api';
export const ListOfPersons = (props) => {

const listOfPersons = props.persons
const [newPersons, setNewPersons] = useState([])
const [currentPageNumber, setCurrentPageNumber] = useState(1)

const getNewPersons = () => {
    if (currentPageNumber !== 10) {
      setCurrentPageNumber(currentPageNumber + 1)
      return setNewPersons(getPersons(currentPageNumber))
    } else {
      throw new console.error()
  }
}
return <div>
   {
     listOfPersons && Array.isArray(listOfPersons) ?
     listOfPersons.map(person => {
      return <PersonCard name={person.name} gender={person.gender} />
    }) : []
}
<button onClick={() => {getNewPersons()}}>Загрузить ещё</button>