How to access one function from one react component to another

Question

Hi I want that when someone click on backproject I want to set my modal component display to block currently its set to none but when I add that function in App.js it when function is console.log but when I want to show that component it does not do that neither It shows any error

import './App.css';
import First from './Assets/First';
import Modal from './Assets/Modal';
import Navbar from './Assets/Navbar';
import Second from './Assets/Second';
import { useState } from 'react';
import Third from './Assets/Third';

function App() {
  const [back, setback] = useState(0)
  return (
    <div className="App">
    {/* <Navbar/> */}
    <div id="modal">
      <Modal/>
    </div>
    <First/>
    <Second/>
    <Third/>

    </div>
  );
  
  // function back_pro(){
  //   console.log('click')
  //   setback(1)
  //   console.log(back)
  //   document.getElementById('modal').style.display= 'block'
  // }
  
}


export default App;
now my component from where I want to have the click function 


import React from 'react'
import Navbar from './Navbar'
import bg from './images/bg.jpg'
import logo_2 from './images/logo_2.svg'
import { useState } from 'react'
import book from './images/book.svg'
// import './function.js'

import './First.css'
export default function First(props) {

  return (
    <div id="frs">
      <div id="nav">

        <Navbar />
      </div>
      <div id="frs_card">
        <img src={logo_2} alt="" />
        <h1>
          Mastercraft Bamboo Monitor Riser

        </h1>
        <p id="para">
          A beautiful & handcrafted monitor stand to reduce neck and eye strain.

        </p>
        <div id="opt">
          <div id="back" onClick={back_pro}>
            <p>
              Back this project

            </p>
          </div>
          <div id="book">
            <img src={book} alt="" />
            <p>
              Bookmark

            </p>
          </div>
        </div>
      </div>

    </div>

  )

 
}



Now my Modal component 
import React from 'react'
import './Modal.css'
import close_a from './images/close_a.svg'
import check from './images/check.svg'
import './First.js'
// import './function.js'
export default function Modal() {
    return (

        <div id="modal">
            <div id="close_a">
                <img src={close_a} alt="" />
            </div>
            <h2>
                Back this project
            </h2>
            <p id="para_c">
                Want to support us in bringing Mastercraft Bamboo Monitor Riser out in the world?

            </p>
            <div id="opt_a">
                <div className="opts">
                    <div className="head">
                        <div className="head_a">

                            <input type="radio" name="" id="no_" />
                            <label htmlFor="no_" className='label'>
                                Pledge with no reward

                            </label>
                        </div>
                        <div className="left_b">

                        </div>
                    </div>
                    <p>
                        Choose to support us without a reward if you simply believe in our project. As a backer,
                        you will be signed up to receive product updates via email.
                    </p>
                </div>
                <div className="opts">
                    <div className="head">
                        <div className="head_a">

                            <input type="radio" name="" id="pld_25" />
                            <label htmlFor="pld_25" className='label'>
                                Bamboo Stand
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                Pledge $25 or more

                            </label>
                        </div>
                        <div className="left_b">
                            <h4>
                                101
                            </h4>
                            <p className="left_l">
                                left
                            </p>
                        </div>
                    </div>
                    <p>
                        Pledge $25 or more
                        You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and
                        you’ll be added to a special Backer member list.
                    </p>
                </div>
                <div className="opts">
                    <div className="head">
                        <div className="head_a">

                            <input type="radio" name="" id="pld_75" />
                            <label htmlFor="pld_75" className='label'>
                                Black Edition Stand
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                Pledge $75 or more

                            </label>
                        </div>
                        <div className="left_b">
                            <h4>
                                64
                            </h4>
                            <p className="left_l">
                                left
                            </p>
                        </div>
                    </div>
                    <p>
                        You get a Black Special Edition computer stand and a personal thank you. You’ll be added to our Backer
                        member list. Shipping is included.
                    </p>
                </div>
                <div className="opts">
                    <div className="head">
                        <div className="head_a">

                            <input type="radio" name="" id="pld_inv" />
                            <label htmlFor="pld_inv" className='label'>
                                Mahogany Special Edition
                                &nbsp;
                                &nbsp;
                                &nbsp;
                                &nbsp;
                                Pledge $200 or more

                            </label>
                        </div>
                        <div className="left_b">
                            <h4>
                                0
                            </h4>
                            <p className="left_l">
                                left
                            </p>
                        </div>
                    </div>
                    <p>
                        You get two Special Edition Mahogany stands, a Backer T-Shirt, and a personal thank you. You’ll be added
                        to our Backer member list. Shipping is included.
                    </p>
                </div>
            </div>
        </div>
    )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

So this is the thing