我正在学习React，我被这个警告卡住了：“react-dom.development.js：86 Warning：React无法识别DOM元素上的isSelected prop。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为isselected。如果您不小心从父组件传递了它，请将其从DOM元素中删除。
该警告在呈现Survey组件时出现，但不是每次都出现。有时我需要重新加载页面几次才能显示。
我有一个调查与2可点击按钮：用“是”和“不是”来回答问题。我希望选择的答案有一个box-shadow CSS属性，所以我在我的CSS中做了一个条件，我使用CSS-in-JS。它像预期的那样工作，但我有警告...
下面是我的Survey元素的代码：

// various imports

const SurveyContainer = styled.div`...
`;

const QuestionTitle = styled.h2`...
`;

const QuestionContent = styled.span`...
`;

const LinkWrapper = styled.div`...
`;

const ReplyBox = styled.button`
    // other CSS properties
    box-shadow: ${(props) =>
        props.isSelected ? `0px 0px 0px 2px ${colors.primary} inset` : "none"};
    &:first-child {
        margin-right: 15px;
    }
    &:last-of-type {
        margin-left: 15px;
    }
`;

const ReplyWrapper = styled.div`
    // CSS properties
`;

function Survey() {
    const { questionNumber } = useParams();
    const questionNumberInt = parseInt(questionNumber);
    const prevQuestionNumber =
        questionNumberInt === 1 ? 1 : questionNumberInt - 1;
    const nextQuestionNumber = questionNumberInt + 1;
    const [surveyData, setSurveyData] = useState({});
    const [isDataLoading, setDataLoading] = useState(false);
    const { answers, saveAnswers } = useContext(SurveyContext);
    const [error, setError] = useState(false);

    function saveReply(answer) {
        saveAnswers({ [questionNumber]: answer });
    }

    useEffect(() => {
        async function fetchSurvey() {...
        }
        fetchSurvey();
    }, []);

    if (error) {...
    }

    return (
        <SurveyContainer>
            <QuestionTitle>Question {questionNumber}</QuestionTitle>
            {isDataLoading ? (
                <Loader />
            ) : (
                <QuestionContent>{surveyData[questionNumber]}</QuestionContent>
            )}
            <ReplyWrapper>
                <ReplyBox
                    onClick={() => saveReply(true)}
                    isSelected={answers[questionNumber] === true}
                >
                    Oui
                </ReplyBox>
                <ReplyBox
                    onClick={() => saveReply(false)}
                    isSelected={answers[questionNumber] === false}
                >
                    Non
                </ReplyBox>
            </ReplyWrapper>
            <LinkWrapper>
                <Link to={`/survey/${prevQuestionNumber}`}>Précédent</Link>
                {surveyData[questionNumberInt + 1] ? (
                    <Link to={`/survey/${nextQuestionNumber}`}>Suivant</Link>
                ) : (
                    <Link to="/results">Résultats</Link>
                )}
            </LinkWrapper>
        </SurveyContainer>
    );
}

export default Survey;

我如何才能仍然使用prop来获得CSS代码的条件验证，而不会以这个错误结束？
也许我不能在“ReplyBox”中写“isSelected={answers[questionNumber] = true}”，因为它是一个按钮样式的组件，而不是其他React组件？但我还是得按下按钮...
除了一个 prop ，还有什么东西可以让我得到同样的结果吗？