React子组件调用父组件showSnack函数报错：showSnack不是函数

为了避免页面跳转时Snackbar被立即关闭，我将Snackbar放在父组件中。但点击子组件按钮调用通过props传入的showSnack函数时，出现了Uncaught TypeError: showSnack is not a function错误。代码逻辑看似正常：父组件定义showSnack函数并传入子组件，子组件通过props接收该函数，最终发现刷新页面即可解决问题。

简化子组件代码 #

export default function Child({ showSnack }) {
    return (
        <Button variant="contained"
            onClick={() => {
                // navigate('/home');
                showSnack('Application submitted for review');
            }}>
            Confirm
        </Button>
    );
}

简化父组件App.js代码 #

function App() {
  const [snackOpen, setOpenSnack] = React.useState(false);
  const [snackText, setSnackText] = React.useState('');

  function showSnack(snackText) {    
    setSnackText(snackText);
    setOpenSnack(true);
  }

  const handleCloseSnack = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
    setOpenSnack(false);
  };

  return (
    <div>
      <Navbar />
      <BrowserRouter>
        <Routes>
          <Route path="/">
            <Route path="child" element={<Child showSnack={showSnack} />} />
          </Route>
        </Routes>
      </BrowserRouter>

      <Snackbar
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        open={snackOpen}
        autoHideDuration={2000}
        // onClose={handleCloseSnack}
        message={snackText}
      />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者zhrgci