How to use the preact.createRef function in preact

constructor() {
		super( ...arguments );
		this.input = createRef();
		this.requestId = 0;

		// TODO: Rework this line; we shouldn't reassign properties.
		this.props.aggregations = buildFilterAggregations( this.props.options.widgets );

		this.state = { isLoading: false, response: {}, showResults: false };
		this.getDebouncedResults = debounce( this.getResults, 200 );
		this.prepareDomForMounting();
	}

constructor( props ) {
		super( props );
		this.filtersList = createRef();
		this.idPrefix = uniqueId( 'jetpack-instant-search__filter-' );

		if ( this.props.type === 'date' ) {
			// NOTE: This assumes that the configuration never changes. It will break if we
			// ever adjust it dynamically.
			this.dateOptions = getDateOptions( this.props.configuration.interval );
		}
	}

test('findByTestId returns the element', async () => {
  const ref = createRef()

  const { findByTestId } = render(<div data-testid="foo">)

  expect(await findByTestId('foo')).toBe(ref.current)
})
</div>

test('renders div into document', () => {
  const ref = createRef()

  const { container } = render(<div>)

  expect(container.firstChild).toBe(ref.current)
})
</div>

constructor(props) {
        super(props);

        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();
        this.valueRef = createRef();

        this.state = extend(this.state, { value: this.props.value });
    }

constructor(props) {
        super(props);

        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();
        this.valueRef = createRef();

        this.state = extend(this.state, { value: this.props.value });
    }

constructor(props) {
        super(props);
        const { values } = props;

        this.valuesRef = createRef();
        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();

        this.state = extend(this.state, {
            values: {
                active: -1,
                selected: values.map(v => false)
            }
        });
    }

constructor(props) {
        super(props);
        const { values } = props;

        this.valuesRef = createRef();
        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();

        this.state = extend(this.state, {
            values: {
                active: -1,
                selected: values.map(v => false)
            }
        });
    }

constructor(props) {
        super(props);
        const { values } = props;

        this.valuesRef = createRef();
        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();

        this.state = extend(this.state, {
            values: {
                active: -1,
                selected: values.map(v => false)
            }
        });
    }

constructor(props) {
        super(props);

        this.searchRef = createRef();
        this.bodyRef = createRef();
        this.containerRef = createRef();
        this.dropdownRef = createRef();
        this.valueRef = createRef();

        this.state = extend(this.state, { value: this.props.value });
    }