how do i split a simple html page into multiple react components and share states?

In one component:

export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [checkedItems, setCheckedItems] = React.useState([]);

  const getRows = () => {
    const length = inputValue > 0 ? inputValue : 0;
    const arr = Array.from({ length }, (_, i) => i + 1);

  return (
    <ol>
      {arr.map((item) => (
        <li key={item}>
          <input
            onChange={() => {
              const items = checkedItems.includes(item)
                ? checkedItems.filter((num) => num !== item)
                : [...checkedItems, item];

              setCheckedItems(items);
            }}
            type="checkbox"
            checked={checkedItems.includes(item)}
          />
        </li>
      ))}
    </ol>
  );
}
  };

  return (
    <div className="App">
      <label htmlFor="inputNumberOfCheckboxes">
        Enter number of checkboxes:
      </label>
      <input
        name="inputNumberOfCheckboxes"
        type="number"
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
      />
      <ol>{getRows()}</ol>
      {inputValue > 0 ? null : <p>None</p>}
      checked items: {checkedItems.length}
    </div>
  );
}

working example

Splitted:

Input.js

export default function Input({ name, value, onChange }) {
  return (
    <div>
      <label htmlFor={name}>Enter number of checkboxes:</label>
      <input
        name={name}
        type="number"
        onChange={(e) => onChange(e.target.value)}
        value={value}
      />
    </div>
  );
}

List.js

export default function List({ inputValue, checkedItems, setCheckedItems }) {
  const length = inputValue > 0 ? inputValue : 0;
  const arr = Array.from({ length }, (_, i) => i + 1);

  return (
    <ol>
      {arr.map((item) => (
        <li key={item}>
          <input
            onChange={() => {
              const items = checkedItems.includes(item)
                ? checkedItems.filter((num) => num !== item)
                : [...checkedItems, item];
              setCheckedItems(items);
            }}
            type="checkbox"
            checked={checkedItems.includes(item)}
          />
        </li>
      ))}
    </ol>
  );
}

Summary.js

export default function Summary({ inputValue, checkedItems }) {
  return (
    <p>
      {inputValue > 0 ? null : <p>None</p>}
      checked items: {checkedItems.length}
    </p>
  );
}

App.js

export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const [checkedItems, setCheckedItems] = React.useState([]);

  return (
    <div className="App">
      <Input onChange={setInputValue} value={inputValue} />
      <List
        name="inputNumberOfCheckboxes"
        inputValue={inputValue}
        checkedItems={checkedItems}
        setCheckedItems={setCheckedItems}
      />
      <Summary inputValue={inputValue} checkedItems={checkedItems} />
    </div>
  );
}

working example