Как избежать расширения Bootstrap 4 NavBar при реализации поля автозаполнения в React?

Question

Я использую React 16.5.2 и Bootstrap 4.1.3 в своем проекте, и я хочу иметь заголовок на NavBar.Я реализовал поле автозаполнения на NavBar, но получилось не так, как я хочу.Кажется, что когда список предложений выйдет, он также расширит Навбар.Другая проблема заключается в том, что список предложений находится справа от входного текста, а не слева.К вашему сведению, я новичок в React и использую ответ-места-автозаполнение, чтобы получить список предложений.Большая часть шрифта, который я нашел, используется вне Navbar.Вот изображение NavBar с полем автозаполнения.

Вот некоторые пакеты, которые я использую: -

1. Автозаполнение React Places - https://www.npmjs.com/package/react-places-autocomplete.

2. bootstrap 4.1.3 - https://www.npmjs.com/package/bootstrap

3. Создание приложения React - https://github.com/facebook/create-react-app

Ниже приведен фрагмент кода из моего компонента SearchForm: -

   render() {
    return (
        <form className="mx-2 my-auto d-inline w-100" onSubmit={this.handleSubmit}>
            {this.state.gmapsLoaded && (
                <PlacesAutocomplete
                    value={this.state.address}
                    onChange={this.handleChange}
                    onSelect={this.handleSelect}
                >
                    {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (

                        <div className="input-group">
                            <input
                                {...getInputProps({
                                    placeholder: 'Search Places ...',
                                    className: 'form-control border border--0',
                                })}
                            />
                            <div className="autocomplete-dropdown-container">
                                {loading && <div>Loading...</div>}
                                {suggestions.map(suggestion => {
                                    const className = suggestion.active
                                        ? 'suggestion-item--active'
                                        : 'suggestion-item';
                                    // inline style for demonstration purpose
                                    const style = suggestion.active
                                        ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                                        : { backgroundColor: '#ffffff', cursor: 'pointer' };
                                    return (
                                        <div
                                            {...getSuggestionItemProps(suggestion, {
                                                className,
                                                style,
                                            })}
                                        >
                                            <span>{suggestion.description}</span>
                                        </div>
                                    );
                                })}
                            </div>
                            <span className="input-group-append">
                                <button className="btn btn-outline-secondary border border-left-0" type="button" onClick={this.handleOnClick}>
                                    <FontAwesomeIcon icon={faSearch} />
                                </button>
                            </span>
                        </div>
                    )}
                </PlacesAutocomplete>
            )}
        </form>
    )
}