You need to add a function in the app.js to handle the click on the button, so the function will change the state show to true, and you will pass the state to your modal, like this:

App.js

[showState, setShowState] = useState(false)
buttonClickedHandler = () => {
   setShowState((showState) => showState = !showState )
}

<div className="App">
      <HeroSlider buttonClicked={buttonClickedHandler} />
      <HowItWorks />
      <Modal show={showState} buttonClicked={buttonClickedHandler} />
      <Footer />
</div>

HeroSlider.js

import React, { useState } from "react";
import Header from './Header'

function HeroSlider(props) {
    const [show, setShow] = useState(false);
    const modalShow = () => setShow(true);
    const openIsAccount = () => {

    }
    return (

 <div className="jumbotron" id="jumbotron2" >
<button type="button" className="btn btn-primary" id="shoutBtn" onClick={props.buttonClicked}><span>Get Started</span>
</button>
 </div>
    );
}

export default HeroSlider;

IsAccountOpen.js

const IsAccountOpen = (props) => {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Modal show={props.show} onHide={props.buttonClicked} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    I will not close 
                 </Modal.Body>
            </Modal>
        </>
    );

};

export default IsAccountOpen

I think the best solution is to use redux, because you will need to access and update the state from different components, you shouldn't use context API because the state changes frequently and you will hit the performance.