Why can’t I grab state from one component to another component?

• I have two function component (component1) and it’s a main component and (component2) which i want to grap state data from it

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const TestContext = createContext();

function Component1() {
  const test = useContext(TestContext);
  return (

      <h1>{`${test}`}</h1>
      
  );
}

function Component2() {
      const [test, setTest] = useState("From Component 3");

  return (
    <TestContext.Provider value={test}>
      <Component1 />
    </TestContext.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Component1 />);

In this question:

• I want to use only useContext Hook to bring state
• I want Component1 is the rendered component.

I try a lot but always the result is “undefined“