我有一个应用程序组件，其中有两个孩子，

1. a选择组件和
   1.一按钮组件

import React from "react";
import { Button } from "@mui/material";
import SelectVariant from "./Components/SelectVariant";
import {category} from "./data";
import { nanoid } from "nanoid";

function App() {
  return(
    <div>
      <SelectVariant 
      values = {category}
      name = "Category"
      />

      <Button variant="contained">Get</Button>
    </div>
  )     
  
}

导出默认应用程序;'
我的“Select”组件是一个材质UI组件，它在其状态中保存其值

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 SelectSmall(props) {
  const [category, setCategory] = React.useState('');

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

  const menuItems = props.values.map(ele => <MenuItem value={ele}>{ele}</MenuItem>)

  return (
    <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
      <InputLabel id="demo-select-small">{props.name}</InputLabel>
      <Select
        labelId="demo-select-small"
        id="demo-select-small"
        value={category}
        label={props.name}
        onChange={handleChange}
      >
        {menuItems}
      </Select>
    </FormControl>
  );
}

我希望控制台记录单击按钮时Select组件保存的值Get
我应该怎么做呢？或者我应该在app组件中设置状态吗？