I am using react auto-suggest and I want to enhance it, but the documentation hasn't helped me much. My suggestions are structured like this and I retrieve them from firebase (I fetch all the products etc.)

suggestions=[
{
name:"product name", 
brand:"brand name", 
img: an image url
}
]

The code works fine and I get suggestions, but for example if I have a product with a name consisting of 2 words for example, I only get the correct suggestion if I type in the first word. Here is the getSuggestions and getSuggestionValue functions:

const getSuggestions = value => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;
  
    return inputLength === 0 ? [] : searchProducts.filter(prod =>
      prod.name.toLowerCase().slice(0, inputLength) === inputValue || prod.brand.toLowerCase().slice(0, inputLength)===inputValue
    );
  };

  const getSuggestionValue = suggestion => suggestion.brand+"-"+suggestion.name;

Also, when rendering, I also want to display a little image, but the renderSuggestion doesn't work. Here is the function:

const renderSuggestion = suggestion => (
    <div style={{display:'flex', flexDirection:'row', width:'100px'}}>
      <img src={suggestion.img[0]} style={{width:'10px', height:'10px'}}/>
      <p>{suggestion.brand} - {suggestion.name}</p>
    </div>
  );

Also, the suggestions come with bullets like in an unordered list. Is there anyway I can change this?

A hint or anything would be very much appreciated. Thank you!