RouteModal.js

import React, { useState } from "react";
import { Marker } from "pigeon-maps";
import Modal from "react-modal";
import "./RouteModal.css";

export default function RouteModal(props) {
    const [modal, setModal] = useState(false);


    const toggleModal = () => {
        setModal(!modal);
    };

    return (
        <>
            <Marker key={props.index} width={props.width} anchor={[props.lat, props.lng]} color={props.color} onClick={toggleModal} />
            {(modal) && (
                <Modal
                    isOpen={modal}
                    onRequestClose={toggleModal}
                    ariaHideApp={false}
                >
                    <h2>{props.name}</h2>
                    <p>{props.name}</p>
                    <button onClick={toggleModal}>Close</button>
                </Modal>
            )}
        </>
    );
}