Configurando o valor verificado da entrada da caixa de seleção com base no estado verificado

Posso adicionar com êxito o valor e o estado verificado de uma entrada a uma matriz de estado; portanto, quando clico em uma entrada, o valor e o estado verificado são enviados para a matriz e, quando clico novamente, o valor e o estado verificado de essa entrada específica é retirada da matriz.

O que estou travando é se eu for para a próxima etapa/componente e depois voltar, estou tentando definir minha entrada para o estado verificado com base no fato de já estar ou não na matriz de estado.

Existem três entradas, o padrão é desmarcado. Clicarei em #1 e #3, apertarei o próximo botão, irei para a próxima etapa, apertarei o botão Voltar, agora todas as três entradas estão desmarcadas novamente, embora o estado ainda tenha #1 e #3. Gostaria que os números 1 e 3 aparecessem como marcados.

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)}
                />

Pensei que talvez percorrer a matriz de estado para combinar um valor da matriz com o valor de entrada e extrair o estado verificado se correspondesse poderia funcionar, mas não tive sucesso nisso. Também consegui definir o atributo verificado como se houver um estado verificado como verdadeiro na matriz de estado, mas isso definiria todas as três entradas como verificadas em vez da entrada específica.