React (5) - MinutesToHours, KmToMiles Converter

<script type="text/babel">
    function MinToHours() {
        const [amount, setAmount] = React.useState(0);
        const [flipped, setFlipped] = React.useState(false);

        const onChange = (event) => {
            setAmount(event.target.value);
        };
        const Reset = () => setAmount(0);
        const onFlip = () => {
            Reset();
            setFlipped((current) => !current);
        }

        return (
            <div>
                <div>
                    <h3> [Minutes To Hours] </h3>
                    <label htmlFor="minutes">Minutes</label>
                    <input
                        value={flipped ? amount * 60 : amount}
                        id="minutes"
                        placeholder="Minutes"
                        type="number"
                        onChange={onChange}
                        disabled={flipped}
                    />
                </div>

                <div>
                    <label htmlFor="hours">Hours</label>
                    <input
                        value={flipped ? amount : Math.round(amount / 60)}
                        id="hours"
                        placeholder="Hours"
                        type="number"
                        disabled={!flipped}
                        onChange={onChange}

                    />
                </div>
                <button onClick={Reset}>Reset</button>
                <button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>
            </div>
        );
    }
    function KmToMiles() {
        const [amount, setAmount] = React.useState(0);
        const [flip, setFlip] = React.useState(false);
        const onChange = (event) => {
            setAmount(event.target.value);
        }
        const Reset = () => setAmount(0);
        const onFlip = () => {
            Reset();
            setFlip((current)=>!current);
        }

        return (
            <div>
                <h3> [Km To Miles] </h3>
                <div>
                    <label htmlfor="km">Km</label>
                    <input
                        id="km"
                        type="number"
                        placeholder="km"
                        onChange={onChange}
                        disabled={flip}
                        value={flip ?  amount / 0.62 : amount}
                    >
                    </input>
                </div>
                <div>
                    <label htmlfor="miles">Miles</label>
                    <input
                        id="miles"
                        type="number"
                        placeholder="miles"
                        onChange={onChange}
                        disabled={!flip}
                        value={flip ? amount :amount * 0.62}
                    >
                    </input>
                </div>
                <button onClick={Reset}> Reset </button>
                <button onClick={onFlip}>{flip ? "Turn Back" : "Invert"} </button>
            </div>
        )
    }
    function App() {
        const [index, setIndex] = React.useState("xx");
        const onChange = (event) => {
            setIndex(event.target.value);
        }
        return (
            <div>
                <h1>Super Converter</h1>
                <select value={index} onChange={onChange}>
                    <option value="xx"> Select your units </option>
                    <option value="0"> MinToHours </option>
                    <option value="1"> KmToMiles </option>
                </select>
                <hr />
                {index === "xx" ? "Please select your units" : null}
                {index === "0" ? <MinToHours /> : null}
                {index === "1" ? <KmToMiles /> : null}
            </div>
        );
    }

    const root = document.querySelector("#root");
    ReactDOM.render(<App />, root);

</script>

<select> <option> 으로 유저가 unit을 선택할 수 있게 만들어줬다.