我用Reactjs做了一个简单的搜索栏。我需要在搜索栏中做一个小的修改，但是我不能得到我想要的。我想做的是在下面的代码中返回给搜索栏的输入，并在页面上打印为“You searched for ....”。我在下面的代码中的searchItem中保留我在搜索栏中得到的输入。
如何返回SearchItem并将其显示给用户？
我把相关的部分代码，以避免混淆

const handleSearch = e => {
    const searchItem = e.target.value

    console.log(searchItem)

    const searchedProducts = products.filter(item => item.productName.toLowerCase().includes(searchItem.toLowerCase()))

    setProductsData(searchedProducts)
  }

  
  return (
    <Helmet>
      <CommonSection title={'Products'}/>
        <section>
          <Container>
            <Row>
            
            <Col lg='3' md='3'>
              <div className="filter__widget">
                  <select>
                    <option>Sort by</option>
                    <option value='ascending'>Ascending</option>
                    <option value='descending'>Descending</option>
                  </select>
                </div>
            </Col>
            <Col lg='6' md='6'>
              <div className="search__box">
                <input type='text' placeholder='Search...' onChange={handleSearch}/>
                <span><i class='ri-search-line'></i></span>
              </div>
              <div >
              <THIS AREA RETURN SEARCH BAR INPUT>
              </div>
            </Col>
          </Row>
          </Container>
        </section>

        <section className='pt-0'>
          <Container>
            <Row>
              {productsData.length === 0 ? (
                <h1 className='text-center fs-4'>No products are found!</h1>
              ) : (
                <ProductList data = {productsData} />
              )
            }
            </Row>
          </Container>
        </section>
    </Helmet>
  );
};

export default Shop;

下面是我应该如何将它返回给用户：