How to create react multi-step modal form with react hook

Question

I want to create a multi-step modal form, with this modal when a user clicks a button to get started, a modal pops up asking if he/she has an account. If the user clicks "No", no account exist another modal pop that will direct the user to signup, if "Yes" account exists a different modal pops up to proceed to add info, etc. I will have about 6 modals.

But the challenge is that I have not been able to open and close each modal at each step successfully. I have searched online/everywhere, the only example I see are ordinary form steps

complete code https://github.com/dokunbam/react-multi-step-modal

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path={["/", "/home"]} component={Home} />
        </Switch>
      </BrowserRouter>
   </div>
  );
}
export default App;

This is the home component

import HeroSlider from './HeroSlider'
const Home = (props) => {
    return (
        <div>
            <HeroSlider />
            {/*other modules*/}
        </div>
    )
}
export default Home

The module that output all the steps

import OutputStepModels from './OutputStepModels'
const HeroSlider = (props) => {
 return (
        <div><Jumbotron>
            <h1>Hello, world!</h1>
            <p>
                This is a simple hero unit<br />
                <OutputStepModels />
            </p>
        </Jumbotron></div>
    )
}
export default HeroSlider

I have to install react-hook-helper as seen in a tutorial to see if this will help

import { useForm, useStep } from "react-hooks-helper";
import Info from "./Modals/Info";
import SenderRecipientInfo from "./Modals/SenderRecipientInfo";
import OopsNoAccount from "./Modals/OopsNoAccount";
import ConfirmSMS from "./Modals/ConfirmSMS";

const defaultData = {
    senderName: "",
    recipientName: "",
    recipientPhoneNumber: "",
}

const steps = [
    { id: '' },
    { id: 'Info' },
    { id: 'SenderRecipientInfo' },
    { id: 'OopsNoAccount' },
    { id: 'ConfirmSMS' }
]

function OutputStepModels(props) {
    const [show, setShow] = useState(false);
    const [formData, setForm] = useForm(defaultData)
    const { step, navigation } = useStep({
        steps,
        initialStep: 0
    });

    props = { formData, setForm, navigation, show, setShow }
    switch (steps.id) {
        case "Info":
            return <Info {...props} />;
        case "SenderRecipientInfo":
            return <SenderRecipientInfo {...props} />;
        case "ConfirmSMS":
            return <ConfirmSMS {...props} />;
        case "OopsNoAccount":
            return <OopsNoAccount {...props} />;
        default:
            return <Info {...props} />;
    }
}
export default OutputStepModels

I will only post three modals that I have created so as not to make the post too long. If I can achieve three steps first I can apply the same method to the other three steps. They are identical but with different content.

The first is the info modal, where user will be asked, if account exist or not

import { Button, Modal } from 'react-bootstrap';


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

    console.log("info-modal-props", props)
    return (
        <>
            <Button variant="primary" show={props.show}>
                Get Started Info Modal
            </Button>

            <Modal show={props.show} onHide={handleClose} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Do you have account
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        No
                    </Button>
                    <Button variant="primary">Yes</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}
export default Info

if yes

function SenderRecipientInfo(props) {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Launch SenderRecepient
      </Button>
            <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>

                    <Form>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Label>Sender Name</Form.Label>
                            <Form.Control type="text" placeholder="Enter Sender Name" />
                        </Form.Group>

                        <Button variant="primary" type="submit">
                            Submit
                        </Button>
                    </Form>

                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary">Understood</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}
export default SenderRecipientInfo

if no

function OopsNoAccount(props) {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    console.log(props)

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Launch OopsNoAccount
            </Button>
            <Modal show={show} onHide={handleClose} backdrop="static" keyboard={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal title</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Oops no account yet with us,
                    click here to create account

                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    <Button variant="primary">Understood</Button>
                </Modal.Footer>
            </Modal>
        </>
    );
}
export default OopsNoAccount