use of debounce-promise with React. (TypeError: Object(...) is not a function)

[carlosdelfino]

In the first attempt to use the debounce-promise with a React component, I'm encountering the following error that can be seen in the screenshot below, also follows the code used, what am I missing?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from './actions';
import { debounce } from 'debounce-promise';

    class App extends Component {
    constructor(props) {
        super(props);

const _searchAsyncDebounced = debounce(async text => props.fetchUser(text), 500);

        this.handleTextChange = async event => {
            const imageUrl = await _searchAsyncDebounced(event.target.value);
            this.setState({ imageUrl });
        };
    }

    render() {
        let image = '';
        if (this.state.imageUrl) image = <img src={this.state.imageUrl} alt="Not Found" width={100} />;
        return (
            <div>
                <h2>Github Search:</h2>
                <input placeholder="Username" onChange={this.searchUser} />
                <p>{image}</p>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    image: state.user.avatar_url,
});

const mapDispatchToProps = {
    fetchUser,
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);

[bjoerge]

Looks like a named vs default import issue and is unrelated to React.

Try

import debounce from 'debounce-promise'