Javascript 设置复选框根据选中状态输入选中值

我可以成功地将输入的值和判断状态添加到状态数组中，所以当我单击输入时，值和判断状态被推送到数组中，当我再次单击它时，来自该特定输入的值和判断状态被从数组中取出.

我遇到的问题是，如果我转到下一步/组件，然后返回，我试图让我的输入设置为基于它是否已经在状态数组中的判断状态.

有三个输入，它们默认为未选中.我将点击#1和#3，点击Next按钮，转到下一步，点击Back按钮，现在所有三个输入都回到未选中状态，即使状态中仍然有#1和#3.我希望1号和3号显示为选中状态.

const [addon, setAddon] = useState([]); //This is in another file

function AddOns({ addon, setAddon }) {
    const checkHandler = (e) => {
        if (e.target.checked === true) {
            setAddon([
                ...addon,
                { value: e.target.value, checked: e.target.checked },
            ]);
        }

        if (e.target.checked === false) {
            const nextAddon = addon.filter((a) => a.value !== e.target.value);
            setAddon(nextAddon);
        }
    };
                <Input
                    value="Online service"
                    dataAmount="+$1/mo"
                    dataNumber="1"
                    // checked={}
                    addonDetail="Access to multiplayer games"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Larger storage"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail="Extra 1TB of cloud save"
                    onClick={(e) => checkHandler(e)}
                />
                {/* <!-- Add on --> */}
                <Input
                    value="Customizable profile"
                    dataAmount="+$2/mo"
                    dataNumber="2"
                    // checked={}
                    addonDetail=" Custome theme on your profile"
                    onClick={(e) => checkHandler(e)}
                />

我想也许可以循环遍历状态数组以将数组值与输入值匹配，如果匹配则取出选中的状态，但我在这方面并不成功.我还设法将Checked属性设置为，如果状态数组中有一个Checked状态为真，但它会将所有三个输入都设置为Checked，而不是特定输入.