我试图更好地理解react，所以我制作了这个玩具示例，试图让react组件从另一个组件调用函数。我正在查看chrome上的react-dev工具，但控制台上没有任何记录。我不知道为什么会这样。有人能给我解释一下为什么这是错误的，以及如何修复它吗？
testbutton.js文件

import React from 'react';
import Button from '@material-ui/core/Button';

export default function TestButton() {
  return(
    <div>
      <Button
    id='searchButton'
    variant="contained"
    color="primary"
    type="submit"
    fullWidth
    onClick={testFunction}
  >
    Search
  </Button>
    </div>
  );
}

app.js文件：

import './App.css';
import Header from './components/Header.js';
import TestButton from './components/TestButton.js';

function testFunction() {
  console.log("Yay it works!");
}

function App() {
  return (
    <div className="App">
      <Header />
      <TestButton></TestButton>
    </div>
  );
}

export default App;