Error: Functions are not valid as a React child

Al momento de renderizar un componente en React, me apareció este error:

En español: Advertencia: Las funciones no son válidas como elementos hijos de React. Esto puede ocurrir si retornas un componente en lugar de <Componente /> desde el render. O tal vez querías llamar a esta función en lugar de retornarla.

El error

Me dirigí al archivo AuthContext.jsx y todo parecía estar en orden:

import { createContext, useContext, useEffect, useState } from "react";
import { supabase } from "../index.ts";

const AuthContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState([]);

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        async (event, session) => {
          console.log("Auth state changed: ", event, session);
          if (session?.user == null) {
            setUser(null);
          } else {
            setUser(session?.user);
          }
        };
      }
    );

    return () => {
      authListener.subscription;
    };
  }, []);

  return (
    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(AuthContext);
};

Así que entonces me dirigí al lugar donde estaba utilizando el AuthContextProvider:

import { AuthContextProvider, MyRoutes } from "./index.ts";

function App() {
  return (
    <>
      <AuthContextProvider>
        <MyRoutes />
      </AuthContextProvider>
    </>
  );
}

export default App;

Como el AuthContextProvider estaba envolviendo al componente MyRoutes, deduje que este último debía ser el componente que estaba retornando una función en lugar de un child válido para React.

Dentro de routes:

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

import { Home } from "../index.ts";

export function MyRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={Home} />
      </Routes>
    </BrowserRouter>
  );
}

En ese momento continué revisando dentro del componente Home y, como no encontré el error, seguí buscando dentro de los componentes que allí se encontraban. Sin embargo, más tarde descubrí que el error estaba justo en este archivo.

La solución

Si te fijas, al momento de declarar el componente de la ruta raíz ”/”:

<Route path="/" element={Home} />

Estoy pasando incorrectamente el componente Home. La forma correcta es esta:

<Route path="/" element={<Home />} />