Reactjs – Can't access keyword in React.js

I am trying to access a keyword in order to display "You are searching for (any keyword)" but it displays "You are searching for undefined". Can you identify the issue? Thank you in advance!

App.js:

import './App.css';
import {useState, useEffect} from 'react'
import Navbar from './components/Navbar';
import Home from './components/Home';
import AboutView from './components/AboutView';
import SearchView from './components/SearchView'
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';



function App() {

const [searchResults, setSearchResults] = useState([]);
const [SearchText, setSearchText] = useState('');

useEffect(() => {
  console.log(SearchText, "is the search text")
  fetch(`https://api.themoviedb.org/3/search/movie?api_key=ab166ff82684910ae3565621aea04d62&language=en-US&query=${SearchText}&page=1&include_adult=false`)
  .then(response => response.json())
  .then(data =>{
    console.log(data)
    setSearchResults(data.results)
  }
  )
}, [SearchText])



  return (
    <div>
      <Navbar SearchText={SearchText} setSearchText={setSearchText}/>
      <Routes>
        <Route exact path="/" element={<Home/>}/>
        <Route exact path="/about" element={<AboutView/>}/>
        <Route keyword={SearchText} searchResults={searchResults}exact path="/search" element={<SearchView/>} />
      </Routes>
    </div>
  );
}

export default App;

SearchView.js element:

import Hero from "./Hero";


const SearchView = ({ keyword, searchResults }) => {
    const title = `You are searching for ${keyword}`
    console.log(searchResults, "are the search results")
    return (
<>

      <Hero text={title}/>

      </>
    );
  };

  export default SearchView;

qwertyuiopasdfghjklzxcvbn