The result of the invalidateQueries in react-query isn't as expected

Question

I'm practicing using React queries. In this code, I expected to invalidate only the ['test'] query key. However, the ['todos'] query is invalidated and the data is received again from the server. Applying useQuery options does not change the results. I would appreciate some help as to what the problem is.

const { data: todos } = useQuery({
    queryKey: ["todos"],
    queryFn: () => getTodos(),
  });

  const { mutate: handleAddTodo } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries(["test"]);
    },
  });

• Applying useQuery options,
• Applying default options

refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,

but result is not defferent

===========================

App.js
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
      staleTime: 10000,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

//Todos.js
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const getTodos = async (filter) => {
  const { data } = await axios.get(
    `http://localhost:3000/todos${filter ? `?type=${filter}` : ""}`
  );

  return data;
};

const addTodo = async ({ newTodo, newType }) => {
  console.log(newTodo, newType);
  await axios.post("http://localhost:3000/todos", {
    text: newTodo,
    type: newType,
  });
  return;
};

const deleteTodo = async (id) => {
  await axios.delete(`http://localhost:3000/todos/${id}`);
};

const Todos = () => {
  const [newTodo, setNewTodo] = useState("");
  const [newType, setNewType] = useState("study");
  const [filter, setFilter] = useState("");
  const queryClient = useQueryClient();
  const [count, setCount] = useState(0);

  const { data: todos } = useQuery({
    queryKey: ["todos"],
    queryFn: () => getTodos(),
  });

  const { mutate: handleAddTodo } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries(["test"]);
    },
  });

  const handleFilter = (e) => {
    setFilter(e.target.value);
  };

  return (
    <div>
      <input
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Add new todo"
      />
      <select value={newType} onChange={(e) => setNewType(e.target.value)}>
        <option value="study">Study</option>
        <option value="exercise">Exercise</option>
      </select>
      <button onClick={() => handleAddTodo({ newTodo, newType })}>
        Add Todo
      </button>

      <div>
        <span>Filter: </span>
        <select value={filter} onChange={handleFilter}>
          <option value="">All</option>
          <option value="study">Study</option>
          <option value="exercise">Exercise</option>
        </select>
      </div>

      <ul>
        {todos &&
          todos.map((todo) => (
            <li key={todo.id}>
              {todo.text} ({todo.type})
              <button onClick={() => deleteTodo(todo.id)}>Delete</button>
            </li>
          ))}
      </ul>
    </div>
  );
};

export default Todos;