Problem with fetching data from local server using Effect Hooks

Question

so i'm trying to fetch data, from localhost ('http://localhost:3001/persons') to http://localhost:3000/ using Effect hooks.

 const hook = () => {
    axios
      .get('http://localhost:3001/persons')
      .then(response => {
        setPersons(response.data)
        console.log(response.data)
      })
  }

I can see the response data in console, so at least that part is correct lol My best guess is that i have some logical error in the return statement of App component but I don't know what am I doing wrong. Any help would be appreciated!

here's the rest of the App.js:

import { useState, useEffect } from 'react'
import axios from 'axios'
import Person from './components/Person'
import Search from './components/Search'
import Form from './components/Form'

const App = () => {

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

  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')
  const[searchName, setNewSearch] = useState('')
  const[personsFilter, setPersonsFilter] = useState(persons)



  const hook = () => {
    axios
      .get('http://localhost:3001/persons')
      .then(response => {
        setPersons(response.data)
        console.log(response.data)
      })
  }
  useEffect(hook, [])
  


  const addContact = (event) => {
    event.preventDefault()
    const nameObject = {
      name: newName,
      number: newNumber,
      id: persons.length+1,
    }

  const currentPerson = persons.filter((person) => person.name === newName);
      if (currentPerson.length === 1) {
        alert(`${newName} is already added to phonebook`)
      } else {
      setPersons(persons.concat(nameObject))
      setNewName('')
      setNewNumber('')
    }
  }

  const filterPersons = (event) => {
    const searchName = event.target.value.toLowerCase()
    setNewSearch(searchName)
    const newPersons = persons.filter (
      (person) => 
        person.name.toLowerCase().search(searchName) !== -1
    )
    setPersonsFilter(newPersons)
  }

  const handleNameChange = (event) => {
    setNewName(event.target.value)
  }

  const handleNumberChange = (event) => {
    setNewNumber(event.target.value)
  }

  const formData = {
    addContact,
    newName,
    setNewName,
    newNumber,
    setNewNumber,
  };

  const searchData ={
    searchName,
    filterPersons
  }

  return (
    <div>
      <h2>Phonebook</h2>
      <Search data={searchData} />
      <Form data={formData} />
      <h2>Numbers</h2>
      <ul>
           <Person personsFilter={personsFilter} />
      </ul>
    </div>
  )
}

export default App

index.js

import React from 'react';
import ReactDOM from 'react-dom/client'

import App from './App'


ReactDOM.createRoot(document.getElementById('root')).render(<App />)