A component is changing a controlled input. React

Question

I have created a react component but got stuck with an error.

I am posting code as well, any help appreciated.

I am trying to show this on a Input box and take input from it to search based on text...............nmnmnmnmbnbnvbnvnbvnbvnbnvnbvbnvbnvbvbnvbvbnvnbvbnvbn.....

thanks!

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Component/Header';
import Recipe from './Component/Recipe';
import  Value from './Component/Form';
import Form from './Component/Form';




function App() {
    
    const [Search, setSearch] = React.useState("");
    
    const onInputChange = (event) => {
    
       setSearch(event.target.Value)
    }
  return (
    <div className="container">
     
        <Header Search={Search} onInputChange={onInputChange} />
       <Value />
       <Form />
      <Recipe />
      
    
    </div>

  );
}

export default App;

import React from 'react';
import { Button, input } from 'reactstrap';
import './Header.css';

const Header = props => {

    return (
        <div className= "jumbotron">
        
        <h1 className= "brand-icons"><span class="material-icons">
fastfood </span> Food Recipe </h1>
        <div>
        <input type="text"
    
        placeholder="Search Recipe"
        value={props.Search}
        onChange={props.onInputChange} />
        
        <Button className="icon">Search</Button>
        
        </div>
    
</div>
    );
}

export default Header;

Answer 1

setSearch(event.target.Value) should be setSearch(event.target.value)

---

Minor: `Search` variable should be in camelCase