'How do I add a box-shadow to my checked label? (React)

I am trying to have the style of a label changed based on whether its child’s radio input is checked or not. Since CSS does not allow a parent to change based on its child, I tried adding conditional styling, which didn't work. Probably because my label is a mapped array.

How do I add a box-shadow to my checked label?

My label and input code:

              <label
                key={platform.name}
                data-name={platform}
                /*  onClick={onClickLabel} */
                /* className={`unchecked ${isChecked ? 'checked' : ''}`} */
              >
                <input
                  type="radio"
                  name="platforms"
                  value={platform.name}
                  onChange={(event) => setCheckedPlatform(event.target.value)}
                  id={platform.name}
                />
                <span style={{ fontSize: '1.5rem', marginBottom: '-5px' }}>{platform.icon}</span>
                {platform.name}
              </label>
            ))} 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source