Debe inicializar las personas con una matriz vacía, entonces no se mostrará indefinido. Me gusta el siguiente código

 const [persons, setPersons] = useState([])

Te sugiero que:

1. Llame a la función getPersons solo en el montaje del componente con una matriz vacía en la matriz de dependencias
2. Inicialice el estado de las personas con una matriz vacía
3. Tenga cuidado con el tipo de respuesta de su api (un objeto con los campos de count , next , previous , result ), para llamar a la función setPersons con el result
4. Tenga cuidado con los errores cuando llame a la API getPersons con una instrucción catch que establecerá una matriz vacía, por ejemplo.
5. Es posible que lea personas solo cuando las personas cambien en lugar de cada representación, por lo que podría colocar su console.log dentro de un useEffect con una matriz de personas dentro de la matriz de dependencias.

 import { useEffect, useState } from "react"; import { SearchBar } from "./SearchBar"; import { getPersons } from "../../apies/api"; import { ListOfPersons } from "./listOfPersons"; const Home = () => { const [valueOfInput, valueOfInputChange] = useState("") const [persons, setPersons] = useState([]) useEffect(() => { getPersons() .then(response => setPersons(response.data.results)) .catch(e => setPersons([]) }, []); useEffect(()=>console.log(persons),[persons]) return <div> <h1>Поиск персонажей</h1> <SearchBar personGetRequest={valueOfInputChange}/> <ListOfPersons personsList={persons}/> </div>; }; export default Home;

Debería usar esto para obtener datos

 useEffect(() => { getPersons().then(response => setPersons(response.data.data)) }, [setPersons]); console.log(persons)