React.js – Can’t figure out why I’m getting this error: Invalid hook call. Hooks can only be called inside of the body of a function component

I’ll start by saying I’ve gone through this page: https://reactjs.org/warnings/invalid-hook-call-warning.html and I don’t see any reason why I will be getting this error, my versions are all fine and I don’t have duplicate Reacts.

The error is thrown when I click on a card.

This is my App.js:

const App = () => {
  const [inputString, setInputString] = useState("") //Error points to here

  const updateInput = (e) => {
    const lowerString = e.target.value.toLowerCase();
    setInputString(lowerString);
  }

  return (
    <>
    <div className='search-bar-container'>
      <img src='https://cdn-icons.flaticon.com/png/512/868/premium/868596.png?token=exp=1647880908~hmac=5e802c3c8b8423596716ca9353212d17' className='poke-ball-img' />
      <input type='text' placeholder='Search For a Pokemon!' onChange={updateInput}></input>
    </div>
    <div className='card-container'>
      <RenderPokemon input={inputString} />
    </div>
    </>
  );
}

export default App;

And this is RenderPokemon:

const RenderPokemon = (text) => {
  const [rawPokemonList, setRawPokemonList] = useState([]);
  const getPokemonData = async (id) => {
    //Move this out somehow, to avoid calling on every render 
    try {
      const res = await fetch("https://pokeapi.co/api/v2/pokemon/" + id);
      const pokemon = await res.json();
      return pokemon;
    } catch (e) {
      console.log(e);
    }
  };

  const sortPokemonList = rawPokemonList.filter((poke) => {
    if(text.input === "") {
      return poke;
    } else {
      return poke.name.toLowerCase().includes(text.input)
    }
  })

  useEffect((i) => {
    const promises = [];
    for (let i = 1; i < 152; i++) {
      promises.push(getPokemonData(i));
    }
    Promise.all(promises).then((results)=>{
      setRawPokemonList(results);
    })
  }, []);

  return (
      (sortPokemonList).map(poke=>(
        <div className='card' onClick={updatePokemonId} id={poke.id}>
          <img src={'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/' + poke.id + '.svg'} className='PokeImg' key={poke.id} id={poke.id}/>
          <div className='container'>
            <p>{poke.name}</p>
          </div>
        </div>
      ))
  )
}

export default RenderPokemon;