Is it possible to pass variables from a child component to the parent component in react?

I am making a simple food ordering web app and was trying to organize the ordering page into separate components but am now running into the issue of passing a variable to the parent page. I want to collect the item.Price and item.specBurgerType and pass to the parent. Is this possible or should I just restructure my code?

This is what I have for the parent component:

const Order = () => {

    const [order, setOrder] = useState({
       specBurger: "",
       protein: "",
       bread: "",
       toppings: "",
       sides: "",
       drinks: "" 
    });

    function handleSpec(spec, price) {
        this.setOrder({specBurger: spec});
    }

    return(
        <div className="order">
            <h1 className="title">Welcome to D & S Burgers</h1>
            <Link to="./pages/Login"><button className="loginButton">Manager Login</button></Link>
            <h2>Please choose your items and place your order!</h2>

            <div className="orderSection">
                <SpecialtyBurgers onSpecSelect={handleSpec}/>
                <Custom/>
                <Sides />
                <Drinks />
                <div><Link to="/pages/Confirmation"><button className="orderButton">Order</button></Link></div>

            </div>
        </div>
    );
};```

Here is the child: 

const SpecialtyBurgers = () => {

const [specBurgers, setSpecBurgers] = useState([]);
useEffect( () => {
    axios.get('http://localhost:8800/specialtyburgers')
    .then(res => {
        setSpecBurgers(res.data);
    })
}, [])

const [burgerType, setBurgerType] = useState({
    burger: "",
    price: 0.0
})
const [price, setPrice] = useState();
const [specOrder, setSpecOrder] = useState([]);
function handleChange(p, e) {
    if(e.target.checked) {
        setSpecOrder(e.target.value);
        setPrice();
        //this.props.handleSpec(specOrder, price);
    }
    else if(!e.target.unchecked){
        setSpecOrder("");
        setPrice('0.0');
        //this.props.handleSpec(specOrder, price);
    }
}

var specBurgerDetails = "";
specBurgerDetails = specBurgers.map( (item, index) => {
    return(
        <div className="item">
            <h2 key={index}>{item.SpecBurgerType}</h2>
            <p>{item.Protein}</p>
            <p>{item.Toppings}</p>
            <p>{item.Price}</p>
            <input type='checkbox' value={item.SpecBurgerType} onChange={(e) => handleChange(item.price, e)}/>
            <p>{specOrder}</p>
            <p>{price}</p>
        </div>
    )
});

return(
    <div className="orderSection">
            <h1 className="menuTitle">Specialty Burgers</h1>
            <div className="menuItems">
                {specBurgerDetails}
            </div>
    </div>
);

};“`