React form input for API Request is not updating

I am trying to use the searchInput state as a variable for the api request. In the return statement, the button is not working as intended. The page refreshes and nothing is loaded. For some unknown reason, if React re-renders the page after being edited, it loads correctly.

import React, {useState, useEffect} from "react"
import "../../styles/components.css"
import './Recipes.css'
const key = 'API_KEY';
export default function Recipes() {
const [posts, setPosts] = useState([]);
const [searchInput, setSearchInput] = useState("");
const recipesDisplay = posts?.map((response, i) => (
<div key={response.id} className="list-group-item">
<img src={response.image_url} />
<h3 >{response.title}</h3>
<p>By: {response.publisher}</p>
</div>
));
const handleChange = (e) => {
e.preventDefault();
setSearchInput(e.target.value);
};
const ShowPosts = () => {
useEffect( () => { 
async function fetchData() {
try {
const response = await fetch(`https://forkify-api.herokuapp.com/api/v2/recipes?search=${searchInput}&key=${key}`); 
if (response.ok) {
const jsonResponse = await response.json();
console.log(searchInput);
await setPosts(jsonResponse.data.recipes);
await console.log(jsonResponse);
}                    
} catch (err) {
console.log(err);
}
}
fetchData();
}, []);
}
return (
<div className="main">
<h1>Recipes</h1>
<form>
<input
type="search"
placeholder="Search here"
onChange={handleChange}
value={searchInput}
/>
<button onClick={handleChange}>Submit</button>
</form>
{ShowPosts()}
{recipesDisplay}
</div>
)
}

You should never put useEffect inside a function this way. You could perhaps wrap your function in useCallback, but useCallback needs to be on the outside. But you might be able to just have the useEffect do its work on the initial draw of the component based on its arguments and not worry about having a named ShowPosts function.

Your inline recipesDisplay variable will return a new value on every render, causing your component to rerender more than it needs to, probably constantly. And that will cause ShowPosts to constantly run. Assuming it even works with useEffect inside it, this will constantly be resetting your posts/recipes, exacerbating the problem. ShowPosts itself is also being recreated on every render, again adding to the problem.

See Everything you Thought You Knew About React Functional Components is Wrong for more details.