Updating useState from components - reactjs

Question

I am learning ReactJS (slowly it seems) and was wondering how the below would work:
I have a search function that the user can enter a word(s) into and it spits out a load of variations of the word entered. The word is put into a button that I would like the user to be able to click and have the whole thing happen again (rather than them having to enter the name in manually).
I can't figure out how to update the useState from the NameList.js file. (I currently get the Error: React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function) Thanks in advance!
NameList.js
export default function NamesList({ namesList }) {
var names_generated = arrayMaker(generator(split_name(namesList.toString())))
return (
names_generated.map(names_generated => {
return(
<div className="col-4 col-xl-2 col-xxl-1">
<button className="sug-names">{names_generated.name}</button>
</div>
)
})
)
}
Home.js
export default function Home() {
const [namesList, setNamesList] = useState([])
const inputName = useRef()
function getInputName(e){
e.preventDefault();
const name = inputName.current.value
if (name === '') return
setNamesList([name])
}
return (
<>
<div className="d-flex align-items-center justify-content-center">
<div className="">
<Container>
<Form>
<div>
<Form.Control ref={inputName} id="input_name" name="username" type="text" placeholder="Desired Name" />
<Button onClick={getInputName} variant="primary" type="submit"></Button>
</div>
</Form>
</Container>
<Container>
<div className='row'>
<NameList namesList={namesList} />
</div>
</Container>
</div>
</div>
<div>0 Names Found</div>
</>
)
}

Answer 1

I guess it happened because of two things,
The first is that the child should not be in the form of:
“function NamesList(){}”
but rather must be in the form of:
“const NamesList =() =>{}”
and as for the parent, it must be in the form of:
“function home(){}”
and not
“const NamesList = () =>{}”
And the second thing is to try to delete the parentheses like this code:
const NamesList = (namesList) => {
var names_generated = arrayMaker(generator(split_name(namesList.toString())))
return (
names_generated.map(names_generated => {
return(
<div className="col-4 col-xl-2 col-xxl-1">
<button className="sug-names">{names_generated.name}</button>
</div>
)
})
)
}
export default NamesList ;
also edit this function in Home file:
function getInputName(e){
e.preventDefault();
const name = inputName.current.value
if (name === '') return
setNamesList(name)
}