javascript - ギャツビー: 新しいアイテムが選択された場合、以前に開いたアイテムを閉じる方法は?

Question

リスト項目のページがあり、それぞれをクリックして情報ボックスを開くオプションがあります。1 つをクリックすると、情報ボックスが開かれますが、別のものをクリックすると、以前のものは閉じずにそこにとどまります。どうすれば機能させることができるので、新規をクリックすると、以前に開いていたものが閉じますか? ここに私のコード？

import React, { useState } from "react";
import "../../styles/styles.scss";
import InfoIcon from "../../images/icons/info.svg";
import InfoBox from "../info/InfoBox";

const Step = ({ title, description }) => {
    const [show, setShow] = useState(false);

    const openInfo = () => {
        setShow(true);
    };

    const closeInfo = () => {
        setShow(false);
    };

    return (
        <>
            <li>
                <div className="list-item" onClick={openInfo}>
                    <div className="list-item-content">
                        <h3>{title}</h3>
                        <InfoIcon className="info-icon" />
                    </div>
                </div>
            </li>

            {show && (
                <InfoBox
                    title={title}
                    description={description}
                    closeInfo={closeInfo}
                />
            )}
        </>
    );
};

export default Step;