App.ts

import { Router } from "@reach/router";
import { useMachine } from "@xstate/react";
import { SnackbarProvider } from "notistack";
import React from "react";
import Header from "./components/Header";
import SignIn from "./components/SignIn";
import AuthMachine from "./states/AuthMachine";

const App: React.FC = () => {
  const [current, send] = useMachine(AuthMachine, { devTools: true });
  console.log(current);
  return (
    <SnackbarProvider maxSnack={3}>
      <Header />
      {current.matches("authorized") && <h1>Authorized</h1>}
      <Router>
        <SignIn path="/login" />
      </Router>
    </SnackbarProvider>
  );
};

export default App;