React JS - Erro: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. | Front-end

Pessoal, estou com um problema nessa implementação, antes de começar a fazer a conexão com o banco de dados do Firebase no Cloud Firestore, estava tudo dando certo, após a conexão com o BD me retornou este, não estou conseguindo encontrar uma solução para este problema, será que vocês poderiam me ajudar?

Caso a informação esteja muito vaga, posso mandar mais informações a respeito do código.

Código abaixo:

import React, { useState } from 'react';
import { useSelector } from "react-redux";
import "./evento-cadastro.css";
import { Link } from "react-router-dom";
import Navbar from "../../components/nav-bar/";

import firebase from "../../config/firebase";

function EventoCadastro() {
    const [msgTipo, setMsgTipo] = useState();
    const [titulo, setTitulo] = useState();
    const [tipo, setTipo] = useState();
    const [detalhes, setDetalhes] = useState();
    const [data, setData] = useState();
    const [hora, setHora] = useState();
    const [foto, setFoto] = useState();
    const usuarioEmail = useSelector(state => state.usuarioEmail);

    const storage = firebase.storage();
    const bd = firebase.firestore();

    function cadastrar() {
        setMsgTipo(null);

        storage.ref(`imagens/${foto.name}`).put(foto).then(() => {
            bd.collection("eventos").add({
                titulo: titulo,
                tipo: tipo,
                detalhes: detalhes,
                data: data,
                hora: hora,
                usuario: usuarioEmail,
                visualizacoes: 0,
                foto: foto.name,
                publico: 1,
                criacao: new Date()
            }).then(() => {
                setMsgTipo("sucesso");
            }).catch(erro => {
                setMsgTipo("erro");
            });
        });

        return (
            <>
                <Navbar />
                <div className="col-12 mt-5">
                    <div className="row">
                        <h3 className="mx-auto font-weight-bold">Novo Evento</h3>
                    </div>

                    <form>
                        <div className="form-group">
                            <label>Título</label>
                            <input onChange={(e) => setTitulo(e.target.value)} type="text" className="form-control"></input>
                        </div>

                        <div className="form-group">
                            <label>Tipo do Evento</label>
                            <select onChange={(e) => setTipo(e.target.value)} className="form-control">
                                <option disabled selected value>--- Selecione um tipo de evento ---</option>
                                <option>Festa</option>
                                <option>Aniversário</option>
                                <option>Teato</option>
                                <option>Show</option>
                            </select>
                        </div>

                        <div className="form-group">
                            <label>Descrição do evento</label>
                            <textarea onChange={(e) => setDetalhes(e.target.value)} className="form-control" rows="3"></textarea>
                        </div>

                        <div className="form-group row">
                            <div className="col-6">
                                <label>Data</label>
                                <input onChange={(e) => setData(e.target.value)} type="date" className="form-control"></input>
                            </div>

                            <div className="col-6">
                                <label>Hora</label>
                                <input onChange={(e) => setHora(e.target.value)} type="time" className="form-control"></input>
                            </div>
                        </div>

                        <div className="form-group">
                            <label>Upload da foto</label>
                            <input onChange={(e) => setFoto(e.target.files[0])} type="file" className="form-control"></input>
                        </div>

                        <button onClick={cadastrar} type="button" className="btn btn-lg btn-block mt-3 mb-5 btn-cadastro">Publicar Evento</button>
                    </form>

                    <div className="msg-login text-black text-center mt-2">
                        {msgTipo === "sucesso" && <span><strong>WoW!</strong> Evento publicado com sucesso! ✌</span>}
                        {msgTipo === "erro" && <span><strong>OpS!</strong> Não foi possível publicar o evento! &#129488;</span>}
                    </div>
                </div>
            </>
        );
    };
};

export default EventoCadastro;

Boa noite, Thiago! Como vai?

Como a mensagem de erro diz, o problema está ocorrendo pois não há um método render() retornando o corpo do componente. Normalmente os componentes seguem a estrutora de class component

class MeuComponente extends Component {

     // Métodos do componente omitidos.

     render() {
          return // JSX do corpo do componente omitida.
     }
}

export default MeuComponente;

ou então uma estrutura de function component

function MeuComponente() {

     return // JSX do corpo do componente omitida.
}

export default MeuComponente;

O detalhe é que o seu componente EventoCadastro não segue nenhuma dessas formas e por isso o erro está ocorrendo! Minha sugestão é que vc tente adaptar o que deseja fazer para uma dessas formas que eu mostrei e veja se o problema é resolvido.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!