Olá!

Criei meu própria projeto para seguir o curso, porém ao invés de usar Material UI eu usei Chakra e fiz algumas modificações no arquivo base (layout, etc). Tentei seguir o que foi passado, porém estou tendo erro com as rotas. Como o título desde tópico diz, o erro é o seguinte:

Uncaught Error: [undefined] is not a component. All component children of must be a or <React.Fragment>

Código das Rotas (está faltando algumas rotas) :

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Login from 'pages/login';
import Feira from 'pages/feira';
import Carrinho from 'pages/carrinho';

import { UsuarioContext } from 'common/context/Usuario';
import React, { useState } from 'react';

const Router = () => {
    const [nome, setNome] = useState("");
    const [saldo, setSaldo] = useState(0);

    return (
        <BrowserRouter>
                <Routes>
                    <Route exact path='/'>
                        <UsuarioContext.Provider value={{saldo, setSaldo, nome, setNome}}>
                            <Login />
                        </UsuarioContext.Provider>
                    </Route>
                </Routes>
        </BrowserRouter>
    )
}

export default Router;

Quando tento usar o Switch e outros recursos do react-router-dom usados pelo professor, ele diz não encontrar. O mesmo ocorreu com useHistory, então tive que fazer de outra forma.

Código Usuario.js

import { createContext } from 'react'

export const UsuarioContext = createContext()

Código do index.js [Login]

**Algumas coisas estão bem diferentes do código do professor porque, como eu disse, usei o Chakra e também não consegui fazer uso do useHistory.**

import { ArrowForwardIcon } from "@chakra-ui/icons";
import {
  Input,
  Box,
  Button,
  FormControl,
  FormLabel,
  NumberInput,
  NumberInputField,
  NumberIncrementStepper,
  NumberDecrementStepper,
  NumberInputStepper,
} from "@chakra-ui/react";
import { Link } from 'react-router-dom'
import { UsuarioContext } from "common/context/Usuario";

const Login = () => {

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="center"
      mt={10}
      flexDirection="column"
    >
      <UsuarioContext.Consumer>
        {({nome, setNome, saldo, setSaldo})=> (
          <>
          <Box fontSize={32} width={500}>
            Insira seu nome
          </Box>
          <FormControl width={500} isRequired={true}>
            <FormLabel mt={5}>Nome</FormLabel>
            <Input
              variant="filled"
              bg="#F79554"
              focusBorderColor="black"
              _hover={{ backgroundColor: "#C25208" }}
              value={nome}
              onChange={(event) => setNome(event.target.value)}
            ></Input>
            <FormLabel mt={5}>Saldo</FormLabel>
            <NumberInput min={0} variant="filled" focusBorderColor="black">
              <NumberInputField bg="#F79554" _hover={{ backgroundColor: "#C25208" }} value={saldo} onChange={(event) => setSaldo(event.target.value)}/>
              <NumberInputStepper>
                <NumberIncrementStepper color="#C25208" />
                <NumberDecrementStepper color="#C25208" />
              </NumberInputStepper>
            </NumberInput>
            <Link to='/feira'>
            <Button
              bg="#F5690B"
              color="white"
              _hover={{ backgroundColor: "#C25208" }}
              _active={{ backgrounColor: "white" }}
              _focus={{border: '2px solid #754728'}}
              mt={10}
              width={500}
              icon={<ArrowForwardIcon/>}
              rightIcon={<ArrowForwardIcon />}
            >
              Avançar
            </Button>
            </Link>
          </FormControl>
        </>
        )}
      </UsuarioContext.Consumer>
    </Box>
  );
};

export default Login;