How to use context in react

Pls am a beginner in React learning context. am trying to pass some value to my introduce component in App file but am stock. pls I need help. below are my code:

// from my App file

import React from 'react';
import './App.css';
import { useUser } from './UserContext';

function Introduce() {
  const { user } = useUser();

  return (
    <div>
      <p>My name is {user.name}</p>
    </div>
  );
}

function App() {
  return <Introduce />;
}

export default App;

//from my useContext file

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user] = React.useState({
    name: 'Williams',
    email: '[email protected]',
    age: 30,
  });

  <UserContext.Provider value={{ user }}></UserContext.Provider>;
}
export const useUser = () => useContext(UserContext);

// from my index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { UserProvider } from './UserContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <UserProvider>
      <App />
    </UserProvider>
  </React.StrictMode>
);