How connect frontend and backend? (solved)

import { useEffect,useState } from "react"
import axios, { AxiosError } from "axios"
import { json } from "react-router"

export function useBooks() {
  const [books,setBooks] = useState<any[]>([])
  const [loading,setLoading] = useState(false)
  const [error,setError] = useState('')


  async function fetchBooks(){
    try {
      setLoading(true)
      const response = await fetch('https://localhost:7123/api/BookStore/')
      const data = await response.json()
      setBooks(data.books)
      setLoading(false)
          
    } catch(e:unknown) {
      const error = e as AxiosError
      setLoading(false)
      setError(error.message)
    }
  }

  useEffect(()=> {
    fetchBooks()
  },[])
  return { books, error, loading}
}

  const {loading,error,books} = useBooks()

 {/* Books output */}
  <div className="flex flex-col gap-y-4 px-8 py-4 border-[1px] border-[#aaaaaa] rounded-xl">
    <h1 className="text-2xl font-bold text-center">Books</h1>
    {loading && <p>Loading...</p>}
    { error && <p className='text-center text-red-600'>{error}</p>}
    {books.map(book => <Book key={book.id} {...book} /
  </div>

export function Book(book:any) {
return (
 <div>
              <p>Genre: {book.genre}</p>
              <p>Author: <span className="font-bold">{book.author}</span></p>
              <p>Year: <span className="font-bold">{book.creationYear}</span></p>
            </div>
)
}