I am unable to use the Algolia widgets

Am using Algolia on my React App to do an instant search It works fine to get the Hits and results, but to make it a more friendly user experience by adding the Sort-By(price: asc or desc) its doesn't work, I used the Sort-By component provided by Algolia.

Here is the code:

function Search() {

  const searchClient = algoliasearch('C*********X', 'd***************************9');

  const Hit = ({hit}) =>  {
   return <div>
    <h2>{hit.ProductName}</h2>
    <h3>{hit.ProductPrice}</h3>
  </div>
  }


  return (
    <div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>
  )
}

This works fine but when I add the Sort-by component Like

<div>
  <InstantSearch searchClient={searchClient} indexName="Products">
    <SearchBox />
<SortBy
  defaultRefinement="Products"
  items={[
    { value: 'relevent', label: 'Relevent' },
    { value: 'product_price_asc', label: 'Price asc.' },
    { value: 'product_price_desc', label: 'Price desc.' },
  ]}
/>
    <Hits hitComponent={Hit}/>
  </InstantSearch>
    </div>

The Sort-By Select Shows up by when I change it nothing happens, Is there an easy way to implement the Algolia widgets Ive been stuck on this for days now please help.