Reactjs – React: If I import a useState value from hook, will the component be re-rendered?

Test and Test2 component import useState value test from custom hook(useTest.ts).
I thought both components will be re-rendered when I click "clicked me" because imported useState value test will be updated.
But actually, only Test component is re-rendered. Can anyone explain the reason for me …?

App.tsx

import React from 'react';
import { Test } from './Test';
import { Test2 } from './Test2';

function App() {
  return (
    <>
      <Test />
      <Test2 />
    </>
  );
}

export default App;

Test.tsx

import { useTest } from "./hooks/useTest";

export const Test = () => {
  console.log("Test1 is rendered");

  const {test, testSet, increment} = useTest();

  return (
    <div>
      <h1>Test1</h1>
      <h2>{test}</h2>
      <h2>{testSet}</h2>
      <button onClick={() => {increment()}}>Click me</button>
    </div>
  );
}

Test2.tsx

import { useTest } from "./hooks/useTest";

export const Test2 = () => {
  console.log("Test2 is rendered");
  const {test, testSet} = useTest();

  return (
    <div>
      <h1>Test2</h1>
      <h2>{test}</h2>
    </div>
  );
}

useTest.ts

import { useState } from "react";

export const useTest = () => {
  const [test, setTest] = useState(["orange", "apple", "banana"]);
  const [count, setCount] = useState(0);
  const testSet = new Set(test);

  const increment = () => {
    setCount(count+1)
    setTest(pre => [...pre, `grape${count}`])
    // setTest(newTest);
  };

  return { test, testSet, increment}

}