Как вызвать функцию в другом компоненте из другого компонента в реакции js?

У меня есть два файла header.js и upload.js. В upload.js у меня есть всплывающее окно, которое должно открываться, когда я нажимаю кнопку загрузки в header.js.

Итак, в основном я хочу вызвать функцию setOpened, присутствующую в upload.js, из header.js.

заголовок.js

import React from 'react'

const Header = () => {
  return (
    <div>
          <Link
             data-bs-toggle = "modal"
             onClick = {() => setOpened(true)}
             role = "button"
            >Upload</Link>
    </div>
  )
}

export default Header

загрузить.js

import React from 'react'
const [opened, setOpened] = useState(false);

const Upload = () => {
  return (
    <div>
      <Modal
        opened = {opened}
        onClose = {() => setOpened(false)}
        title = "Introduce yourself!"
      >
        {/* Modal content */}
      </Modal>
    </div>
  )
}

export default Upload

В App.js

import Header from './component/Header';
import Footer from './component/Footer';
import Upload from './component/Upload';

function App() {
  return (
   <Header/>
       <Routes>
         <Route path = "/upload" element = {<Upload/>}/>
       </Routes>
   <Footer/>
);
}

export default App;