Nested Component Searchbar not working

Questions
1

Hello there everyone!

I have an issue, I tried to replicate it with https://codesandbox.io/ but it didn’t let me do so with Framework7 Core + JSX, so I will explain it the best I can.

I have a code that renders from a component and sub-components and one of the sub-components is the Searchbar (form) of Framework7.

If I put the code of the Search component directly on the main return it works, also it works if I put it inside of the main component inside of the return, however, it does not work if I put the code in the Search component, then put it inside of the main component and then the main component inside of the return.

Below is the code of the components resumed:

const Search = (e) => { return() => (<form class="searchbar"> ... </form>)};

const Datal = (e) => { return() => (<ul><li> ... </li></ul> )};

const Navl = (e) => { return() => (<div class="navbar"> ... <Search /> </div>)}

return () => (

	<div class="page"> 
		... 
		<Navl /> 
		... 
		<div class="list searchbar-found"> 
			<Datal /> 
		</div> 
	</div>

)