为了学习react，我创建了一个简单的车辆配置程序。用户选择的发动机型号，变速箱类型等，我已经完成了项目，我学到了很多感谢它，但我有最后一个问题。我想为我的应用程序添加简单的逻辑。
我指的是这种类型的逻辑，所以我会用纯javascript编写它。

if (carModel === "wk" && carEngine === !"2.0 166bhp") {
        alert("You can't pick this engine!")
    }

import React, {useState, useEffect} from "react";
import styles from './style.module.scss';

const ModelsTypes = [
    {
        name: "pro rs3",
        price: 100000,
    },
    {
        name: "uber rs2",
        price: 50000,
    },
    {
        name: "standard",
        price: 10000,
    },
    {
        name: "wk",
        price: 5000,
    },
]

const EngineTypes = [
    {
        name: "5.2l 532bhp",
        price: 10000,
    },
    {
        name: "4.2l 443bhp",
        price: 9000,
    },
    {
        name: "3.6 374bhp",
        price: 5000,
    },
    {
        name: "2.0 166bhp",
        price: 1000,
    },
]

const Gearbox = [
    {
        gearbox: "Manual",
        price: 5000,
    },
    {
        gearbox: "Automatic",
        price: 10000,
    },
]

export const CarCustomization = () => {

    const [carModel, setCarModel] = useState("");
    const [carEngine, setCarEngine] = useState("");
    const [carGearbox, setCarGearbox] = useState("");
    const [totalPrice, setTotalPrice] = useState(0);

    const [switchToggled, setSwitchToggled] = useState(false);

    useEffect(() => {
        setTotalPrice((carModel.price + carEngine.price + carGearbox.price) || 0);
    }, [carModel, carEngine, carGearbox])

    const addCarModel = (e) => {
        setCarModel(carModel => ModelsTypes.find(x => x.name === e.target.value));
    }

    const addCarEngine = (e) => {
        setCarEngine(carEngine => EngineTypes.find(x => x.name === e.target.value));
    }

    const addCarGearbox = (e) => {
        setCarGearbox(carGearbox => Gearbox.find(x => x.gearbox === e.target.value));
    }

    return (
        <div className={styles.wrapper}>
            <div>
                <h1>CKONFIG 5.1</h1>
                <section>
                    <p className={styles.sectionName}>Model</p>
                    <div className={styles.itemWrapper}>
                        {ModelsTypes.map(model =>
                            <label className={styles.button}>
                                <input onClick={addCarModel} type="radio" name="Model" value={model.name}/>
                                <span>{model.name}</span>
                            </label>
                        )}
                    </div>
                </section>
                <section>
                    <p className={styles.sectionName}>Engine</p>
                    <div className={styles.itemWrapper}>
                        {EngineTypes.map(engine =>
                            <label className={styles.button}>
                                <input onClick={addCarEngine} type="radio" name="Engine" value={engine.name}/>
                                <span>{engine.name}</span>
                            </label>
                        )}
                    </div>
                </section>
                <section>
                    <p className={styles.sectionName}>Gearbox</p>
                    <div className={styles.itemWrapper}>
                        {Gearbox.map(gearbox =>
                            <label className={styles.button}>
                                <input onClick={addCarGearbox} type="radio" name="Gearbox"
                                       value={gearbox.gearbox}/>
                                <span>{gearbox.gearbox}</span>
                            </label>
                        )}
                    </div>
                </section>
            </div>
            <div className={styles.summary}>
                <div className={styles.summaryinfo}>
                    <ul>
                        <li>Model</li>
                        <li>Engine</li>
                        <li>Gearbox</li>
                        <li>Price</li>
                    </ul>
                    <ul>
                        <li>{carModel.name}</li>
                        <li>{carEngine.name}</li>
                        <li>{carGearbox.gearbox}</li>
                        <li>${totalPrice}</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

我在这里的摘要部分考虑了条件呈现，但是当我尝试添加它时，应用程序停止返回所选引擎的名称。