Url, not updating with useSearchParams and select tag option is not working while sorting out data

The issues are the select tag option which is not working after I used useSearchParams to update URL by sorting data, the URL is not showing the option when I select the options. The expectation is that when I select any option, the URL should be updating with the option but otherwise.

This is the select tag option code which I created as a reusable component so that I can

const Select = ({ options, value, onChange, ...props }) => {
  return (
    <StyledSelect value={value} {...props}>
      {options.map((option, index) => (
        <option value={option.value} key={index} onChange={onChange}>
          {option.label}
        </option>
      ))}
    </StyledSelect>
  );
};

export default Select;

reuse it another component.

Then the next work is where I called the above component inside the Sort component which contain the logic for the updating the URL and sorting of the array of object(options):

import { useSearchParams } from 'react-router-dom';
import Select from './Select';

const SortBy = ({ options }) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const sortBy = searchParams.get('sortBy') || '';

  function handleChange(e) {
    searchParams.set('sortBy', e.target.value);
    setSearchParams(searchParams);
  }

  return (
    <Select
      value={sortBy}
      options={options}
      type="white"
      onChange={handleChange}
    />
  );
};

export default SortBy;

This last code base is how the SortBy component is call and those options are pass into it

type here