Estoy usando la sugerencia automática de reacción y quiero mejorarla, pero la documentación no me ha ayudado mucho. Mis sugerencias están estructuradas de esta manera y las recupero de firebase (obtengo todos los productos, etc.)

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

El código funciona bien y recibo sugerencias, pero, por ejemplo, si tengo un producto con un nombre que consta de 2 palabras, solo obtengo la sugerencia correcta si escribo la primera palabra. Aquí están las funciones getSuggestions y getSuggestionValue:

 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;

Además, al renderizar, también quiero mostrar una pequeña imagen, pero renderSuggestion no funciona. Aquí está la función:

 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> );

Además, las sugerencias vienen con viñetas como en una lista desordenada. ¿Hay alguna forma de que pueda cambiar esto?

Una pista o cualquier cosa sería muy apreciada. ¡Gracias!