нужно написать поисковую строку на reacte чтобы изначально были только кнопка в виде иконки лупы и только при нажатии на нее выводился input

//
function App() {
  const [on, setOn] = React.useState(false)
  const act = _ => setOn(old => !old)
  return <div>
    {on ? <Input /> : <Img act={act} />}
  </div>
}
//
function Input() {
  const [val, setVal] = React.useState('')
  const act = e => setVal(e.target.value)
  return <div className='input'>
    <p>{val ? val : 1}</p>
    <input type='text' value={val} onChange={act} />
  </div>
}
//
function Img({act}) {
  return <img 
    onClick={act}
    src='https://e7.pngegg.com/pngimages/928/549/png-clipart-magnifying-glass-computer-icons-magnification-loupe-glass-technic.png' 
  />
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

* {
  margin: 0;
  padding: 0;
}
img {
  width: 50px;
  height: 50px;
}
.input {
  position: relative;
  display: inline-block;
  min-width: 100px;
  max-width: 300px;
  padding: 5px;
  border: 1px solid;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}
.input p {
  color: #fff;
}
.input p,
input {
  font-family: Tahoma;
  font-size: 12pt;
}
input {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  border: none;
  outline: none;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>