NPSPageContext.tsx

// Aqui seria o type dizendo todas as variáveis de estado que
// vocês precisarem, aqueles mesmos que vocês fazer com `useState()`
type NPSPageContextType = {
  prop1: array,
  prop2: number
}

// Aqui estamos de fato criando o estado e colocando-os dentro do contexto
// com seus valores iniciais, que é obrigatório
export const NPSPageContext = createContext<NPSPageContextType>({
  prop1: [1, 2, 3],
  prop2: 12345
})

// Aqui estamos criando o provider, e é aqui onde será feito toda a gestão
// dos estados.
export const NPSPageProvider: FC = ({ children }) => {
  const [prop1, setProp1] = useState();
  const [prop2, setProp2] = useState();
  
  const value = { prop1, setProp1, prop2, setProp2 }

  return (
    <NPSPageProvider.Provider value={value}>
      {children}
    </NPSPageProvider.Provider>
  )
}

export const useNPSPage = () => {
  return useContext(NPSPageContext);
}