如何取回被过滤的数据（React Context API）

const data = [
  {
    id: "1",
    color: "red",
    shape: "round"
  },
  {
    id: "2",
    color: "green",
    shape: "round"
  },
  {
    id: "3",
    color: "red",
    shape: "square"
  },
  {
    id: "4",
    color: "green",
    shape: "square"
  },
  {
    id: "5",
    color: "blue",
    shape: "square"
  }
];


function App() {
  const [color, setColor] = React.useState("");
  const [shape, setShape] = React.useState("");

  return (
    <div className="App">
      <div className="container">
        {data
          .filter((el) => {
            if (color && shape) {
              return color === el.color && shape === el.shape;
            }
            if (color || shape) {
              return color === el.color || shape === el.shape;
            }
            return true;
          })
          .map((el) => (
            <div
              key={el.id}
              className={clsx("item", {
                red: el.color === "red",
                green: el.color === "green",
                blue: el.color === "blue",
                round: el.shape === "round"
              })}
            >
              <p>{el.color}</p>
              <p>{el.shape}</p>
            </div>
          ))}
      </div>
      <div>
        <label>
          Shape
          <select value={shape} onChange={(e) => setShape(e.target.value)}>
            <option value="">All</option>
            <option value="square">Square</option>
            <option value="round">Round</option>
          </select>
        </label>
        <label>
          Color
          <select value={color} onChange={(e) => setColor(e.target.value)}>
            <option value="">All</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
          </select>
        </label>
        <button
          type="button"
          onClick={() => {
            setColor("");
            setShape("");
          }}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.item {
  border: 1px solid;
  height: 6rem;
  width: 6rem;
}

.round {
  border-radius: 50%;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/clsx.min.js"></script>
<div id="root" />