How to use the @wordpress/element.createRef function in @wordpress/element

constructor() {
		super( ...arguments );

		this.dropZoneElement = createRef();
		this.dropZone = {
			element: null,
			onDrop: this.props.onDrop,
			onFilesDrop: this.props.onFilesDrop,
			onHTMLDrop: this.props.onHTMLDrop,
			setState: this.setState.bind( this ),
		};
		this.state = {
			isDraggingOverDocument: false,
			isDraggingOverElement: false,
			position: null,
			type: null,
		};
	}

constructor() {
		super( ...arguments );
		this.state = {
			showCopyConfirmation: false,
		};
		this.onCopy = this.onCopy.bind( this );
		this.onSelectInput = this.onSelectInput.bind( this );
		this.postLink = createRef();
	}

constructor() {
		super( ...arguments );

		this.editLink = this.editLink.bind( this );
		this.submitLink = this.submitLink.bind( this );
		this.onKeyDown = this.onKeyDown.bind( this );
		this.onChangeInputValue = this.onChangeInputValue.bind( this );
		this.setLinkTarget = this.setLinkTarget.bind( this );
		this.onClickOutside = this.onClickOutside.bind( this );
		this.resetState = this.resetState.bind( this );
		this.autocompleteRef = createRef();

		this.state = {
			opensInNewWindow: false,
			inputValue: '',
		};
	}

constructor() {
		super( ...arguments );

		this.textRef = createRef();
		this.containerRef = createRef();
		this.state = {
			isEmpty: true,
		};
		this.autocompleter = {
			name: 'placeSearch',
			options: this.search,
			isDebounced: true,
			getOptionLabel: option =&gt; <span>{ option.place_name }</span>,
			getOptionKeywords: option =&gt; [ option.place_name ],
			getOptionCompletion: this.getOptionCompletion,
		};
	}
	componentDidMount() {

constructor() {
		super( ...arguments );

		this.trySandbox = this.trySandbox.bind( this );
		this.checkMessageForResize = this.checkMessageForResize.bind( this );

		this.iframe = createRef();

		this.state = {
			width: 0,
			height: 0,
		};
	}

constructor( props ) {
		super( props );

		this.slideshowRef = createRef();
		this.btnNextRef = createRef();
		this.btnPrevRef = createRef();
		this.paginationRef = createRef();
	}

constructor( props ) {
		super( props );
		this.wrapperRef = createRef();
	}
	componentDidMount() {

function TextareaAutosize({ inputRef, className, ...props }: Props) {
    const ref = inputRef || createRef();

    useEffect(() => {
        const { current: textarea } = ref;
        if (textarea) {
            const offset = textarea.offsetHeight - textarea.clientHeight;
            textarea.style.height = 'auto';
            textarea.style.height = `${textarea.scrollHeight + offset}px`;
        }
    });

    return (

constructor() {
		super();

		this.node = createRef();
		this.editor = null;
	}

constructor( props ) {
		super( props );

		this.state = {
			dialogActive: false,
			menuOpen: false,
		};

		this.handleMenu = this.handleMenu.bind( this );
		this.handleMenuClose = this.handleMenuClose.bind( this );
		this.handleMenuItemSelect = this.handleMenuItemSelect.bind( this );
		this.handleDialog = this.handleDialog.bind( this );
		this.handleDialogClose = this.handleDialogClose.bind( this );
		this.handleUnlinkConfirm = this.handleUnlinkConfirm.bind( this );

		this.menuButtonRef = createRef();
		this.menuRef = createRef();
	}