React context pattern (typescript)

Component.tsx

import { MyContextProvider } from './MyContextProvider;
import { SubComponent } from './SubComponent;

const Component = () => {
  return (
    <MyContextProvider>
      <SubComponent> ... </SubComponent>
    </MyContextProvider>
  );
}

MyContextProvider.tsx

type MyContextType = {
  strValue: string;
  numValue: number;
}

const MyContext = createContext<MyContextType>({} as MyContextType);

type Props = {
  children: ReactNode;
}

export const MyContextProvider = ({children}: Props) => {
  const [someVal, setSomeVal] = useState('')
  
  useEffect(() => {
    // do stuff
  }, []);
  
  return (
    <MyContext.Provider value={ {strValue: 'some string', numValue: 123 } }>
      {children}
    </MyContext.Provider>
  )
}

export const useMyContext = () => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error(`useMyContext must be used within a MyContext.Provider`);
  }
  return context;
};

SubComponent.tsx

import { useMyContext } from './MyContextProvider;

const SubComponent = () => {
  const { strValue, numValue } = useMyContext();

  return (
    <div>
      <div>strValue</div>
      <div>numValue</div>
    </div>
  );
}