Как убрать лишний знак вопроса в url перед / ,используя React Router?

Есть компонент Courses, в нем реализован функционал выбора сортировки курсов в выпадающем меню, далее если нажать на кнопку "Press me" - выбранный метод сортировки добавляется в url. Как пример, правильный переход должен выглядеть так: http://localhost:3000/courses/?sort=title, но у меня почему-то есть лишний знак вопроса после courses http://localhost:3000/courses?/?sort=title

import { Link, useLocation } from 'react-router-dom'
import queryString from 'query-string'
/* queryString -  это объект и у него есть метод parse и в вызове этого метода мы должны передатьт поле search и на выходе получим объект с свойством sort и значчением id (как пример) */
import courses from '../data/courses'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const SORT_KEYS = ['title', 'slug', 'id']

function sortCourses(courses, key) {
  /* если мы не задаем сортировку, то останавливаем выпонение фкнкции */
  const sortedCourses = [...courses]
  if (!key || !SORT_KEYS.includes(key)) {
    return sortedCourses
  }
  /* Функция для сортировки массива key - это строка либо title, slug, id. Метод sort ожидает числовое значение  */
  sortedCourses.sort((a, b) => (a[key] > b[key] ? 1 : -1))
  return sortedCourses
}

const Courses = () => {
  /* -----------Место для хуков------------------- */
  const location = useLocation()
  console.log(location)
  const query = queryString.parse(location.search)

  /* соятоение для распарсенного значения поле sort */
  const [sortKey, setSortKey] = useState(query.sort)

  /* ------------------------------------------------------------------------ */
  const [sortMethod, setSortMethod] = useState('')
  const navigate2 = useNavigate()
  /* функция для двухстороннего связывания */
  function helper(e) {
    const selectedSortMethod = e.target.value
    setSortMethod(selectedSortMethod)
  }

  const sendSubmit = () => {
    // navigate(`/?sort=${sortMethod}`, { relative: 'path' })
    navigate({
      // pathname: '/',
      // relative: 'path',
      search: `/?sort=${sortMethod}`,
    })
  }

  /* --------------------------------------------------------------------------- */

  /* состояние для выбора сортировки из меню------------------------ */

  /* состояние для отсортированного массива и  вызываем функцию, которая возвращает отсортированный массив */
  const [sortedCourses, setSortedCourses] = useState(
    sortCourses(courses, sortKey)
  )

  const navigate = useNavigate()
  // console.log(navigate)

  useEffect(() => {
    if (!SORT_KEYS.includes(sortKey)) {
      // navigate('.')
      setSortKey()
      setSortedCourses([...courses])
    }
  }, [navigate, sortKey])

  // console.log(sortKey)
  return (
    <div>
      <h1>{sortKey ? `Courses sorted by ${sortKey}` : 'Courses'}</h1>
      <select onChange={(e) => helper(e)}>
        <option> Как сортировать?</option>
        <option value="title">По title</option>
        <option value="slug">По slug</option>
        <option value="id">По id</option>
      </select>
      {sortMethod}
      <button onClick={sendSubmit}>press me</button>
      {sortedCourses.map((course) => {
        return (
          <div key={course.id}>
            <Link className="courseLink" to={course.slug}>
              {course.title}
            </Link>
          </div>
        )
      })}
    </div>
  )
}

{
}

export default Courses
**текст, выделенный жирным шрифтом**