Do I really need a useEffect | useLayoutEffect Hook Here? | Next.js | Page 1

My current issue is as follow:
I have 1 component that uses its parent function, while another just calls it. The first one is a button that when pressed acts as if the Enter key has been pressed for the second component which is an input textbox. The second component is the input textbox. It executes the same behavior from said function that the button uses.

is just having a solo function that these 2 components can call upon request an anti-pattern?
For instance, is there something wrong with doing something like:

export default function BackgroundComponent() {
  const inputValComponent = useRef(null);

  const [currentPokemonPicture, setCurrentPokemonPicture] = useState()
 
    async function sumittedPokemon() {

      const currentValue = inputValComponent.current.value;
      const lowerCasedValue = currentValue.toLowerCase();
      // alert(lowerCasedValue);
      try {
        const getData = await fetch(`https://pokeapi.co/api/v2/pokemon/${lowerCasedValue}`)
        const convertToJson = await getData.json()
        const getPokemonSprite = convertToJson.sprites.front_default
        setCurrentPokemonPicture(getPokemonSprite)
        console.log(getPokemonSprite)
      }
      catch (err) {
        console.log(err + "pokemon not found")
      }

    }
  return (
    <div className={styles.bgImage}>
      <DpadAndConfirmButtonsContainer buttonClickedFunction={sumittedPokemon} />
      <SlimButtonsContainer />
      <div className={styles.greenScreen}>
        <input type="text"
          ref={inputValComponent}
          id={styles.textField}
          placeholder="Search Pokemon"
          onKeyUp={(e) => {
            if (e.key === 'Enter') sumittedPokemon();
          }}

        />
      </div>
    </div>
  )
}

?
All help is truly appreciated

#Do I really need a useEffect | useLayoutEffect Hook Here?