Nao estou conseguindo colocar nada fora do form

Fala Diogo, beleza??

Então, sem ver o seu código exatamente fica um pouco complicado de te dizer exatamente o problema, mas creio que seja algo parecido com isso daqui, certo?

    function App() {
        return (
            <form>
                ...
            </form>
            <p> um elemento <p> em baixo do elemento <form> </p>
        )
    }

Caso seja isso, isso é esperado.

O React renderiza o HTML da página com uma técnica chamada JSX baseada em XML. O XML aceita apenas um elemento pai, ou seja, o React herdou isso e aceita apenas um elemento pai por componente.

Felizmente eu tenho a solução para o seu problema!

Para que você consiga fazer isso, você pode:

1. Envolver os seus elementos em um elemento pai, como por exemplo o elemento <div>:

    function App() {
        return (
            <div>
                <form>
                    ...
                </form>
                <p> um elemento <p> em baixo do elemento <form> </p>
            </div>
        )
    }

2. Utilizar o React.Fragment, que é um componente criado pelo React para "burlar" este problema e fingir ser um elemento, sendo que no navegador ele não existe.

    function App() {
        return (
            <React.Fragment>
                <form>
                    ...
                </form>
                <p> um elemento <p> em baixo do elemento <form> </p>
            </React.Fragment>
        )
    }

Espero que eu tenha conseguido responder a sua dúvida!

Bons estudos!!