Bug fixing in the random number generator application

The application implements a random number generator. It is required to fix the issues indicated in the comments to the files, as well as add the ability to delete numbers from the list.

Requirements:

• When clicking the "Show / Hide List" button, the list should be correctly displayed and hidden.
• The "Stop" button should stop the running timer.
• When toggling the visibility of the list, its content should not reset to the initial array [1, 2, 3].
• Add functionality to delete a specific number from the list.
• Improve the application as much as possible (performance, code readability, etc.).

// App.jsx

import List from "./List";

/*
Random number generator.

Description:
Each time "Add Number" is clicked, a random number is added to the end of the list.

"Start" — starts an interval of 1 second that adds a random number to the end of the list.

"Stop" — stops the timer.

"Show / Hide" — controls the display of the application.

🔴 Problems:

1. When clicking hide/show list, it does not expand. Why?

2. "Stop" does not stop the timer. Why?

3. When clicking "Show / Hide", the list resets to [1, 2, 3]. Why?

4. Implement number deletion

5. Maximize the application)))
*/

export default function App() {
  const [visibleList, setVisibleList] = React.useState(true);

  const toggleVisibleList = () => {
    setVisibleList(!visibleList);
  };

  return (
    <div className="App">
      <button onClick={toggleVisibleList}>Show / Hide List</button>
      <br />
      <br />
      <br />
      {visibleList && <List />}
    </div>
  );
}

// List.jsx

import React from "react";
import "./styles.css";

import Buttons from "./Buttons";

export default function List() {
  const [numbers, setNumbers] = React.useState([1, 2, 3]);
  const timerRef = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  const [isVisible, setIsVisible] = React.useState(true);

  const addRandomNumber = () => {
    const random = Math.round(Math.random() * 10);
    setNumbers((prev) => [...prev, random]);
  };

  const start = () => {
    if (!started) {
      setStarted(true);
      timerRef.current = setInterval(addRandomNumber, 1000);
    }
  };

  const stop = () => {
    clearInterval(timerRef.current);
    setStarted(false);
  };

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  React.useEffect(() => {
    if (!isVisible) {
      // Do nothing, keep the list as is
    }
  }, [isVisible]);

  return (
    <div className="list">
      <Buttons
        started={started}
        addRandomNumber={addRandomNumber}
        onStart={start}
        onStop={stop}
        toggleVisibility={toggleVisibility}
      />
      {isVisible && (
        <ul>
          {numbers.map((num, index) => (
            <li key={`${index}_${num}`}>{num}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// Buttons.jsx

import React from "react";

export default function Buttons({ addRandomNumber, onStart, onStop, toggleVisibility }) {
  console.log("render");
  return (
    <div className="buttons">
      <button onClick={addRandomNumber}>Add Number</button>
      <br />
      <button onClick={onStart}>Start</button>
      <button onClick={onStop}>Stop</button>
      <br />
      <button onClick={toggleVisibility}>Show / Hide List</button>
    </div>
  );
}