Example of simple React context in Typescript

accordion-context.tsx

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

type Props = {
  children: React.ReactNode | React.ReactNode[];
};

type Context = {
  isExpanded: boolean;
  toggleItem?: () => void;
};

const AccordionContext = createContext<Context>({
  isExpanded: false,
  toggleItem: undefined,
});

const AccordionProvider = ({ children }: Props) => {
  const [isExpanded, setIsExpanded] = useState<boolean>(false);

  const toggleItem = () => setIsExpanded((isExpanded) => !isExpanded);

  return (
    <AccordionContext.Provider value={{ isExpanded, toggleItem }}>
      {children}
    </AccordionContext.Provider>
  );
};

const useAccordion = () => {
  const context = useContext(AccordionContext);

  if (typeof context === 'undefined') {
    throw new Error('useAccordion must be used within a AccordionProvider');
  }

  return context;
};

export { AccordionProvider, useAccordion };