Not gettting all the data from the MongoDB - node.js

Question

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