javascript – In React.js I keep getting an error in regard to a component being controlled to being uncontrolled, how can I fix this?

I am trying to recreate a simple pokedex app in react that I made in vanilla javascript. I’m trying to get more API practice, but keep running into this error in the console: “Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.”

I tried making my states an empty array and then tried an empty object, but I am still getting the same error message. Any help would be appreciated.

This is the code I have written so far:

import { useState, useEffect } from "react";
import PokemonDetails from "./PokemonDetails";
import Paper from "@mui/material/Paper";
import InputBase from "@mui/material/InputBase";
import IconButton from "@mui/material/IconButton";
import SearchIcon from "@mui/icons-material/Search";
export default function PokemonData() {
  const [searchInput, setSearchInput] = useState("");
  const [pokemonData1, setPokemonData1] = useState(null);
  const [pokemonData2, setPokemonData2] = useState(null);

  useEffect(() => {
    const fetchData1 = () =>
      fetch(
        `https://pokeapi.co/api/v2/pokemon/${searchInput.toLowerCase()}`
      ).then((response) => response.json());
    const fetchData2 = () =>
      fetch(
        `https://pokeapi.co/api/v2/pokemon-species/${searchInput.toLowerCase()}`
      ).then((response) => response.json());

    // Using Promise.all to wait for both requests to complete
    Promise.all([fetchData1(), fetchData2()])
      .then(([result1, result2]) => {
        setPokemonData1(result1);
        setPokemonData2(result2);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  }, []);

  //   SEARCH POKEMON
  const onSearch = (e) => {
    e.preventDefault();
    setSearchInput(e.target.value);
  };

  return (
    

      
        
        
          
        
      
      {/*  */}

      
      
{JSON.stringify(pokemonData1, null, 2)}
{JSON.stringify(pokemonData2, null, 2)}

  );

}```