In this code when I click the delete button I get this error:

App.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

I realized the reason is that I must update the state of selectedNumber before updating the numbers state. I understand that it is impossible to do it just with useState. I realized I could do it with useReducer. Am I right or there is another way to do it without useReducer?

import { useState } from "react";

const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]);
  const [selectedNumber, setselectedNumber] = useState(1);

  return (
    <div>
      <ul>
        {numbers.map((number) => {
          return (
            <li
              key={number}
              onClick={() => setselectedNumber(number)}
              style={
                number === selectedNumber ? { color: "blue" } : { color: "red" }
              }
            >
              {number}
            </li>
          );
        })}
      </ul>
      <div>
        {selectedNumber}
        <button
          onClick={() =>
            setNumbers((prev) => {
              prev.filter((number) => number !== selectedNumber);
            })
          }
        >
          delete
        </button>
      </div>
    </div>
  );
};

export default App;