Флажки

Флажок — это не текст: он либо отмечен, либо нет. Поэтому его состояние — логическое значение, true или false, а управляется он не через value, а через checked:

import { useState } from "react";

export default function App() {
    const [parking, setParking] = useState(false);
    const parkingPrice = parking ? 15 : 0;

    return (
        <main>
            <div className="check">
                <input
                    id="parking"
                    type="checkbox"
                    checked={parking}
                    onChange={(event) => setParking(event.target.checked)}
                />
                <label htmlFor="parking">Я приеду на машине</label>
            </div>
            {parking && <p>Ваше место на парковке: P2</p>}
            <p>Парковка: €{parkingPrice}</p>
        </main>
    );
}

event.target.checked равно true, когда щелчок только что отметил флажок, и false, когда снял отметку. Не используйте здесь event.target.value: значение флажка — это текст "on", отмечен он или нет.

Логическое значение в состоянии хорошо сочетается с тем, что вы знаете из урока «Списки и условия». Часть страницы, которая нужна только пока флажок отмечен, записывается через &&, а значение, зависящее от флажка, — через ? :. В примере место на парковке показывается только тем, кто приедет на машине, а цена парковки равна 15 или 0. И то и другое вычисляется из parking при каждой отрисовке, поэтому меняется с каждым щелчком по флажку.