How I can't update/share the state between Components using useContext React (typescript)

Question

I'm beginner in react(typescript). the Subject is, Im trying to share the updated Data between the components using useContext. when i update the data in component projectInfo. The shared data in component customData is always null.

App Component

import ProjectInfo from "./components/projectInfo";
import CustomData from "./components/customdata";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"
import { DataContextProvider } from "./context/formContext";


 const App = () => {

  return (
  <>
    <DataContextProvider>  
      <Router>
        <Routes> 
            <Route path="/Projectinfo"  element={<ProjectInfo />}/>
            <Route path="/customdaten"  element={ <CustomData />}/>
        </Routes>
      </Router> 
    </DataContextProvider>
  </>   
  );
}

export default App;

ProjectInfo component

import { useContext } from "react"
import { DataContext } from '../context/formContext';


const ProjectInfo = () => {
  const dataContext = useContext(DataContext);

  const handleInputChange = (e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, 
  newValue?: string): void => {   
    const { name } = e.target as HTMLTextAreaElement; 
    dataContext.setState({   
        ...dataContext.state,
        [name]: newValue
    });
  };

  return (
    <>    
      {JSON.stringify(dataContext.state)}
      <TextField 
          name={''name1'}
          onChange={(e, value) => handleInputChange(e, value)}
       />
    </> 
  )
}

export default ProjectInfo

CustomData component

import React, { useContext } from 'react'
import { DataContext  } from '../context/formContext';


const CustomData = () => {
  
    const dataContext = useContext(DataContext);
    return (
      <>    
       {dataContext && JSON.stringify(dataContext.state)}  
      </>
    );
}

export default CustomData

Context file

import React, { createContext, useState } from "react";
import { IGeneralContext } from "../interfaces/intefaces";

type DataContextType = {
  state: IGeneralContext | null,
  setState: React.Dispatch<React.SetStateAction<IGeneralContext| null>>
}

type DataContextProviderProps = {
 children: React.ReactNode;
};

export const DataContext = createContext({} as DataContextType);
export const DataContextProvider = ({ children }: DataContextProviderProps) => {

  const [state, setState] = useState<IGeneralContext | null>(null);

  return (
      <DataContext.Provider value={{state, setState}}> 
        {children}
      </DataContext.Provider>
    )
};

I am asking for help or a hint what I am doing wrong because I have no idea how to make it work.

Or maybe someone has another way, I don't insist on using useState with useContext...etc

Thank you very much in advance for all your help, have a nice day