react tsx class creating useContexthook and how to use in class

Question

I try to learn TSX with class components I know it's old but I want to figure out how its works with class

But Its pretty challenging with this class extend components

Here is my first question

func version :

const NavbarProvider = ({children}) =>{

const values ={
}

return(

<AuthContext.Provider    value={values} >{children}</AuthContext.Provider>

)
}

const useAuth = () =>useContext(AuthContext)

export {NavbarProvider,useAuth}

I want this version in class component so I did class version :

 
  const NavbarContext = createContext<any|null>(null)
  
  export class NavbarContextProvider extends Component<any,any>  { 
 
  setBag = (item:number) =>{
    this.setState(()=>({bag:item}))
  
  }

  value: any

  constructor(props:any) {
    super(props)

  this.state={
    bag:0
    
  }

  this.value={
    bag:this.state.bag,
    setBag:this.setBag
    }
    
      
}
 
 render() { 
 return ( <NavbarContext.Provider value={this.value}>{this.props.children} //there
 </NavbarContext.Provider> ) 

}
} 
export const useNavbarContext = useContext(NavbarContext)

 export default NavbarContextProvider

So my First question is about props.children My logic says it needs to be like that

  constructor(props:any) {
    super(props)

this.props =props
}


 render() { 
 return ( <NavbarContext.Provider value={this.value}>{this.props.children} //there
 </NavbarContext.Provider> ) 

}

but when I write like that give me readonly props err in TSX. so how is happen without the constructor , taking props.children in render method?

second question when how I call useNavbarContext hook to main file

  export class Navbar extends Component {
     items: any; 
     BagIndex: any;

constructor(props: {} | Readonly<{}>){
super(props)

this.BagIndex = useNavbarContext() // this part


 render() { 

 return ( 

  <div>
    <Menubar
  model={this.items} // I clear item for you read clear cod

  className={moduleCSS.Navbar}

 start={``}
  end={``}
/> 

</div> ) 
}} 

it is giving me

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I'm writing to constructor inside. It's body of class I think.

I need advice about react class component with TSX Video. I cannot figure out how it works very well I'm open to new information sources...