Pass a Function from Child to Parent Component | Next.js

Question

So, I have a function in a child component, which produces images, also a button in a parent component which while click needs to fire up a function in the child component

Child

const ImgCreate = (props: any) => {
  const [image, setImage] = useState([]);


  const ImgGeneration = async () => {
    const response = await openai.createImage({
      prompt: `${props.inputValue}`,
      n: 2,
      size: "512x512",
    });
    const url = response.data.data;
    
    {  /*@ts-ignore*/}
    setImage(url);



  };




return (
    <div className="mt-10">
      <div className="flex overflow-x-scroll gap-5">
        {image.map((img, index) => (
          <img
            src={img.url}
            key={index}
            className="mt-7 rounded-lg shadow-md"
            alt="Image"
          />
        ))}
      </div>
</div>

Parent

const Search = (props: any) => {
  const [search, setSearch] = useState("");

  const handleSearch = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSearch(""); // clear search input
  };
  return (
    <>
      <form
        onSubmit={handleSearch}
        className="flex items-center justify-center gap-6"
      >
        <input
          type="text"
          className="border-2 border-gray-300 p-2 rounded-lg outline-none transition-all duration-100 focus:border-blue-500"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Image Description"
        />
        <button
          type="submit"
          className="btn bg-blue-500 text-white rounded-lg font-bold py-2 px-4"
        >
          Create
        </button>
      </form>
      <ImgCreate inputValue={search} />
    </>
  );
};

So the button with type submit, also need to have an onClick event which triggers ImgGeneration() function in the child component

Everything in my power, nothing work