How do I navigate to a different page in my app using React Material UI Select?

I want to navigate to a new page depending on what is selected in a Material UI Select component. Here is the
SelectFoodChange.js :

import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function SelectFoodChange() {
  const [page, setPage] = React.useState('');

  const handleChange = (event) => {
    setPage(event.target.value);
  };

  return (
    <div>
      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="demo-simple-select-helper-label">Food Page</InputLabel>
        <Select
          value={page}
          label="Food Page"
          onChange={handleChange}
        >
          <MenuItem value="branded-foods">Branded Foods</MenuItem>
          <MenuItem value="whole-foods">Whole Foods</MenuItem>

        </Select>
      </FormControl>
    </div>
  );
}

Here is Food page which imports SelectFoodPage component:

Food.js

import React from 'react';
import SelectFoodPage from './SelectFoodPage';
function Food() {
  return (
    <div className='Food'>
       {<SelectFoodPage />}
     </div>
  );
}
export default Food;

Here is how I change pages depending on selected item in a burger menu:

App.js

import './App.css';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Food from './pages/food/Food';

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path='/' element={<Home />}></Route>
          <Route path='/food' element={<Food />}></Route>
        </Routes>
      </Router>
    </>
  )
}

export default App;

How do I navigate to a new page depending on what is selected in a Material UI Select component?