Depois do select com as formas de pagamento, o meu botão de voltar não funciona como deveria. Clico em voltar e não volta, mas quando faço a troca dos pagamentos ou tento adicionar mais um produto direto no carrinho, sou redirecionado para a feira. No console recebo esse alerta em carrinho: You should call navigate() in a React.useEffect(), not when your component is first rendered. Porém não consegui pensar em uma forma de resolver esse problema com useEffect na aplicação.

E quando sou redirecionado para a feira, recebo esse: ** Cannot update a component (RouterProvider) while rendering a different component (Carrinho). To locate the bad setState() call inside Carrinho**

Carrinho

function Carrinho() {
  const [openSnackbar, setOpenSnackbar] = useState(false);
  const {carrinho} = useCarrinhoContext();
  const {saldo} = useContext(UsuarioContext)
  const {formaPagamento, tiposPagamento, mudarFormaPagamento} = usePagamentoContext();;
  const navigate = useNavigate();

  return (
    <Container>
      <Voltar onClick={navigate('/feira')}/>
      <h2>
        Carrinho
      </h2>
      {carrinho.map(produto => (
        <Produto {...produto} key={produto.id}/>
      ))}
      <PagamentoContainer>
        <InputLabel> Forma de Pagamento </InputLabel>
        <Select onChange={(e) => mudarFormaPagamento(e.target.value)} value={formaPagamento.id}>
          {tiposPagamento.map(pagamento => (<MenuItem key={pagamento.id} value={pagamento.id}>{pagamento.nome}</MenuItem>))}
        </Select>
      </PagamentoContainer>
      <TotalContainer>
          <div>
            <h2>Total no Carrinho: </h2>
            <span>R$ {carrinho.reduce((cont, item) => cont + (item.valor * item.quantidade), 0)}</span>
          </div>
          <div>
            <h2> Saldo: </h2>
            <span> R$ {saldo}</span>
          </div>
          <div>
            <h2> Saldo Total: </h2>
            <span> R$ </span>
          </div>
        </TotalContainer>
      <Button
        onClick={() => {
          setOpenSnackbar(true);
        }}
        color="primary"
        variant="contained"
      >
         Comprar
       </Button>
        <Snackbar
          anchorOrigin={
            { 
              vertical: 'top',
              horizontal: 'right'
            }
          }
          open={openSnackbar}
          onClose={() => setOpenSnackbar(false)}
        >
           <MuiAlert
            onClose={() => setOpenSnackbar(false)}
            severity="success"
          >
            Compra feita com sucesso!
          </MuiAlert>
        </Snackbar>
    </Container>
  )
}

routes.js

const Router = () => {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <Login />,
    },
    {
      path: "/feira",
      element: <Feira />,
    },
    {
      path: "/carrinho",
      element: <Carrinho />,
    },
  ]);
  return (
    <UsuarioProvider>
      <CarrinhoProvider>
        <PagamentoProvider>
          <RouterProvider router={router} />
        </PagamentoProvider>
      </CarrinhoProvider>
    </UsuarioProvider>
  );
};