SearchControl Losing focus

See this bare code:

import { __ } from '@wordpress/i18n';
import {InspectorControls} from "@wordpress/block-editor";
import './editor.scss';
import {useState} from "@wordpress/element";
import {SearchControl,PanelBody} from "@wordpress/components";

const Edit = ({attributes, setAttributes}) => {
	const {page} = attributes;

	const [ searchTerm, setSearchTerm ]     = useState( '' );

	const TestFunction	= function(){
		return (< SearchControl onChange={setSearchTerm} value={ searchTerm }/>);
	}

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Page Embed Settings', 'sim' ) }>
					< TestFunction />
					<i>{__('Use searchbox below to search for a page', 'sim')}</i>
					< SearchControl onChange={setSearchTerm} value={ searchTerm }/>
				</PanelBody>
			</InspectorControls>
		</>
	);
}

export default Edit;

`

The SearchControl wrapped in a function keeps loosing the focus when typing, and the one directly in the PanelBody not.
Why?
And how can I solve this?

• This topic was modified 1 year, 8 months ago by t-p. Reason: Moved to Fixing WordPress from Developing with WordPress