ReactJS: Retrieve value from the state of a Child component

I have an app component where I have two child,

1. a Select component and
2. a button component

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>
  )     
  
}

export default App;`

My ‘Select’ component is a material ui component and it holds its value in its state

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>
  );
}

I want to console log the value my Select component is holding when I click on the Button Get

How should I go about this? or should I set up the state in the app component somehow?