Javascript – Trying to add search bar in my Image Gallery app but it is not working

I have added search bar in my image gallery app which is fetching images from pixabay api, I have done everything but it is not working for some reason. I am new to reactjs so excuse me if I made any silly mistake.

here is my app level code

import './App.css';
import React, { useEffect, useState } from 'react'
import ImageCard from './ImageCard.js'
import Search from './Search';

function App() {
  const [images, setImages] = useState([]);
  const [term, setTerm] = useState('');


  useEffect(() => {
    fetch(`https://pixabay.com/api/?key=43750982-cccb38e876ce2f6037a8568fd&q=${term}&image_type=photo&pretty=true`)
      .then(response => response.json())
      .then(data => {
        setImages(data.hits);
      })

  }, [term]);

  return (

    <div className= "container mx-auto">
<Search searchText={(text) => setTerm(text)}  />
      <div className="grid grid-cols-4 gap-4">

        {images.map(image => (
          <ImageCard key={image.id} image={image} />
        ))} </div>
    </div>);
}
export default App;

here is my search bar component code:

import React, { useState } from 'react'

const Search = ({ searchText }) => {
 
 const[text, setText]= useState('');  
 const onSubmit = (e) => {
    e.preventdefault();
    searchText(text);

 } 
    return (
        <div className='mt-7 mb-7'>


            <form onSubmit={onSubmit}  className="max-w-md mx-auto">
                <label for="default-search" className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
                <div className="relative">
                    <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                        <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>
                    <input onChange={e => setText(e.target.value) } npm run buildtype="search" id="default-search" className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search anything" required />
                    <button type="submit" className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Search</button>
                </div>
            </form>


        </div>
    )
}

export default Search;