Not gettting all the data from the MongoDB

I have a route /courses and when I do search for courses from the frontend(ReactJs) it takes me to this URL http://localhost:3001/courses/search?searchQuery=introducton but when I again click on courses button(that is on my navbar), it takes me to /courses but It doesn't show all the courses, it only shows the searched query that I got from the above query. Every time I need to refresh the page to get all the courses.

Courses.js file

import React, { useState } from "react"
import CourseHeader from "./CourseHeader"
import CoursesList from "./CoursesList"
import FilterCourse from "./FilterCourse"
import Filtertech from "./Filtertech"
import { useDispatch, useSelector } from "react-redux"
import { useHistory } from "react-router"
import { getCoursesBySearch } from "../../actions/courses"

const Courses = () => {
  const dispatch = useDispatch()
  const [search, setSearch] = useState("")
  const history = useHistory()

  const searchCourses = () => {
    if (search.trim()) {
      dispatch(getCoursesBySearch({ search }))
      history.push(`/courses/search?searchQuery=${search || "none"}`)
    } else {
      history.push("/courses")
    }
  }
  const handleKeyPress = (e) => {
    if (e.keyCode === 13) {
      searchCourses()
    }
  }

  const courses = useSelector((state) => state.courses)
  return (
    <div className="row-start-2 row-end-3 col-start-1 col-end-2 mx-auto w-full max-w-5xl ">
      <div className="grid grid-cols-layout-course gap-x-3">
        <div>
          <FilterCourse />
          <Filtertech />
        </div>
        <div>
          <CourseHeader
            handleKeyPress={handleKeyPress}
            setSearch={setSearch}
            search={search}
          />
          <CoursesList courses={courses} />
        </div>
      </div>
    </div>
  )
}

export default Courses

CourseList.js

import React from "react"
import CourseCard from "./CourseCard"

const CoursesList = ({ courses }) => {
  return (
    <div className="">
      {courses && courses.map((course) => <CourseCard data={course} key={course._id} />)}
    </div>
  )
}

export default CoursesList

App.js

import "./App.css"
import "./assets/output.css"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Navbar from "./components/layouts/Navbar"
import Courses from "./components/courses/Courses"
import { useEffect } from "react"
import { getCourses } from "./actions/courses"

function App() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getCourses())
  }, [dispatch])

  return (
    <Router>
      <div className="App min-h-screen grid grid-rows-layout-desktop grid-cols-layout-desktop gap-10">
        <Navbar />
        <Switch>
          <Route path="/courses">
            <Courses />
          </Route>
        </Switch>
        <Footer />
      </div>
    </Router>
  )
}

export default App

Anyone please help me with this