单击列表项时如何将数据从子级传递到父级

我正在尝试将单击元素的值传递给标题组件。我是用React-bootstrap提供的模式完成的。父组件（标题）应接收单击的元素的值（在子组件中），并显示在位置（状态）中。我已经花了太多时间了。

import React, {useState} from 'react'
import { Navbar, Container, Button } from 'react-bootstrap'
import {
  faMapMarkerAlt, 
  faAngleDown
  } from "@fortawesome/free-solid-svg-icons";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import LocationModal from '../LocationModal/LocationModal';



export default function Header () {
    const [modalShow, setModalShow] = useState(false)
    const [location, setLocation] = useState('Lagos')
    const handleCallback = () => {
        setLocation({location})
     }
     
    return (
        <>
        <Navbar expand="lg" variant="light" bg="light">
            <Container>
                <Navbar.Brand href="/">Navbar</Navbar.Brand>
                <Button variant="none" onClick={() => setModalShow(true)} className="px-2 d-inline-flex">
                    <span className="ml-1"><FontAwesomeIcon icon={faMapMarkerAlt} /></span>
                    <span className="ml-1">{location}</span>
                    <span className="ml-1"><FontAwesomeIcon icon={faAngleDown} /></span>
                </Button>
                
            </Container>
        </Navbar>
        <LocationModal 
            show={modalShow}
            onHide={() => setModalShow(false)}
            parentcallback={handleCallback} 
        />
        </>
    )
}

位置模态

如您所见，我尝试为从子元素（locationModal）获得的值编写一个回调函数，以便可以将其传递并显示在父组件（Header）中。

import React from 'react'
import { Modal } from 'react-bootstrap'

export default function LocationModal(props) {
    const locations = [
        {
            id: 1,
            location: 'Lagos'
        },
        {
            id: 2,
            location: 'Abuja'
        }
    ]
   const handleClick = (value) => {
       props.parentcallback(value)
   }
    return (
      <Modal
        {...props}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton className="border-bottom-0">
          <Modal.Title id="contained-modal-title-vcenter"></Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <ul className="d-flex flex-column align-items-center list-unstyled">
              <h1>Choose Your Location</h1>
              {
                  locations.map(item => {
                      return <li 
                                className="w-75 p-2 m-2 border-1 text-white text-center bg-gray-300 cursor-pointer" 
                                key={item.id}
                                onClick={() => handleClick(item.location)}
                                value={item.location}
                                >
                                {item.location}
                            </li>
                  })
              }
          </ul>
        </Modal.Body>
    
      </Modal>
    );
  }
  

非常感谢。