Estoy tratando de implementar una barra de búsqueda y voy a adjuntar el código a continuación. El problema es que cuando la página se vuelve a cargar y la barra de búsqueda está vacía, no se muestra ningún producto, pero tan pronto como empiezo a escribir algo en la barra de búsqueda, los elementos comienzan a mostrarse según la clave de búsqueda.

¿Alguien puede ayudarme con esto por favor?

 .filter((val) => { if (props.searchTerm == "") { return val; } else if ( val.additionalInfo.toLowerCase().includes(props.searchTerm) ) { return val; } }) .map((post) => { return ( <div className="product-metainfo col-2 mb-4"> <img src={post.images[0].src}></img> <h3 className="product-brand">{post.brand}</h3> <h4 className="product-product">{post.additionalInfo}</h4> <div className="product-price"> <span> <span className="discounted-price">Rs. {post.price} </span> <span className="product-strike"> Rs. {post.mrp}</span> </span> <span className="product-discountPercentage"> ({Math.floor((100 * post.discount) / post.mrp)}% off) </span> </div> </div> ); })}