Render value for no matches found in react-autocomplete

I am using the react-autocomplete npm package to build the autocomplete functionality in my Reactjs app. So far I have been able to render dropdown items that match the user's input, as you see in the documentation of this package. However, I would like to generate a default text in the dropdown as No results found whenever user's input do not match any of the dropdown items. And to be honest I am really struggling with it.

I tried adding custom function to the shouldItemRender to change the state and dropdown items accordingly but it does not help either. Here is the snippet of my code -

const suggestions=  [{id: 100 , text:  "Aluminium extracts" }, {id: 101 , text:  "Copper extracts" }] 

<Autocomplete
    getItemValue={(item) => item.text}
    items={ suggestions }
    renderItem={(item, isHighlighted) => {
            return <div> {item.text} </div>)
        }
    }
    shouldItemRender={(item, value) => item.text.toLowerCase().indexOf(value.toLowerCase()) > -1}
    // shouldItemRender={(item, value) => handleRender(item, value) }
    value={value}
    onChange={(e, newValue) => { setValue(e.target.value) }}
    onSelect={(v) => handleInput(v)}
    inputProps=
/>

I will appreciate your help if you can help me accomplish this. Thank you.

from Render value for no matches found in react-autocomplete