获取的对象返回未定义

我有我需要获取的数据对象，如下所示：

const products = {
        one: {
            id: 1,
            name: 'One',
            image: oneImage,
            chair: {
                name: 'ChairName',
                image: myImage,
                colors: {
                    white: {
                        name: 'White',
                        image: myImage,
                    },
                    black: {
                        name: 'Black',
                        image: myImage,
                    },
                },
            },            
            },
        },
        two: {
            id: 2,
            name: 'Two',
            image: twoImage,
            chair: {
                name: 'Chair,
                image: myImage,
                colors: {
                    white: {
                        name: 'White',
                        image: myImage,
                    },
                    black: {
                        name: 'Black',
                        image: myImage,
                    },
                },
            },
        },
    };

我正在使用 Object.value 获取它们

const ProductsData = Object.values(products).map((data) => {

    return (
        <>
            <div className="box" onClick={() => setSelectedData(data)}>
                 <img src={data.image} />
            </div>
           );
});

上面的这段代码工作得很好，指出选定的数据是这样的：

           {selectedData ? (
              <h1>{selectedData.name}</h1>
           ) : null}

但是现在我想通过所选数据的椅子颜色进行映射，这会导致错误。

我试图做的是只是{selectedData.chair.colors.name}，打印什么，并通过console.logISunderfined

如何打印椅子颜色的 selectedData 以及如何将选取的颜色设置为新的 selectedData？我迷路了。