Master React in Webflow - useState

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const element = document.getElementsByClassName('react')[0];
const root = ReactDOM.createRoot(element);
root.render(<App />);

/* ------------ */
// App.js
import React from 'react';
import NumberTracker from './NumberTracker';

export default function App() {
    return <NumberTracker />;
}

/* ------------ */
// NumberTracker.js
import React, { useState } from 'react';
import Button from './Button';

export default function NumberTracker() {
    const [number, setNumber] = useState(0)

    const increaseNumber = () => {
        setNumber(prev => prev + 1)
    };

    const decreaseNumber = () => {
        setNumber(prev => prev - 1)
    };

    return (
        <>
            <p>{number}</p>
            <Button onClick={increaseNumber}>increase</Button>
            <Button onClick={decreaseNumber}>decrease</Button>
        </>
    );
}

/* ------------ */
// Button.js
import React from 'react'

export default function Button({ children, onClick }) {
    return <button onClick={onClick}>{children}</button>
}