Why am i getting "Invalid hook call" and "Cannot read properties of null (reading 'useState')"

Question

I'm coding a searchbar that returns the book that the user searched for and it's informations. But i'm getting these errors

I already tried to fix these errors, i copied a perfect working code in order to fix this bug but i only go t the same errors again.

SearchBooks.jsx

import React, { useState } from "react"
import axios from 'axios'

function SearchBooks(){
  const [book, setBook] = useState('');
  const [result, setResult] = useState([]);
  const [apiKey, setApiKey] = useState("myapikey")
  
  function handleChange(event){
    setBook(event.target.value)
  }

  function handleSubmit(event){
    event.preventDefault();
    axios.get(`https://www.googleapis.com/books/v1/volumes?q=${book}&key=${apiKey}&maxResults=40`)  
    .then(data => {  
        console.log(data.data.items);  
        setResult(data.data.items);  
    })
  }
  return(
    <div className="w-full mt-10 bg-gray-100 flex justify-center items-center">
      <div className="container mx-auto dark:bg-gray-900  rounded-lg p-14">
        <form onSubmit={handleSubmit}>
          <h1 className="text-center font-bold text-white text-4xl">Find your perfect books </h1> <br />
            <div className="sm:flex items-center bg-white rounded-lg overflow-hidden px-2 py-1 justify-between">
              <input className="text-base text-gray-400 flex-grow outline-none px-2 " type="text" placeholder="Search for books" onChange={handleChange} value={book}/>
              <div className="ms:flex items-center px-2 rounded-lg space-x-4 mx-auto ">
                <button className="dark:bg-gray-900 text-white text-base rounded-lg px-4 py-2 font-thin">Search</button>
              </div>
            </div>
        </form>
      </div>
    </div>
  )
}
export default SearchBooks

app.jsx

import Header from '/components/Header'
import SearchBooks from '/components/SearchBooks'
import AboutInfo from '/components/AboutInfo'
import Tips from '/components/Tips'
import Cards from '/components/Cards'

function App() {
  return (
    <>
    <Header />
    <SearchBooks />
    <AboutInfo />
    <Tips />
    <Cards />
    </>
  );
  
}

export default App;