Add a react-bootstrap alert to handleSubmit in Formik

Use state and conditional rendering. Instead of returning a component set state to a variable, in your render use conditional rendering to check if the value is true.

handleSubmit = (formState, { resetForm }) => {
  // Now, you're getting form state here!
  const payload = {
    ...formState,
    role: formState.role.value,
    createdAt: firebase.firestore.FieldValue.serverTimestamp()
  };
  console.log('formvalues', payload);

  fsDB
    .collection('register')
    .add(payload)
    .then(docRef => {
      resetForm(initialValues);
    })
    .then(e => this.setState({ alert: true }))

    .catch(error => {
      console.error('Error adding document: ', error);
    });
};

In your render

render() {
 ...
  return(
 ....
   {this.state.alert && <AlertDismissible />}
 ...
  )
}

Example Demo

Complete form

import React from 'react';
import { Link } from 'react-router-dom';
import { Formik, Form, Field, ErrorMessage, withFormik } from 'formik';
import * as Yup from 'yup';
import Select from 'react-select';
import { fsDB, firebase, settings } from '../../firebase';
import Temporarynav from '../navigation/Temporarynav.jsx';
import Demo from '../landing/Demo.jsx';
import Footer from '../footer/Footer.jsx';
import './preregister/Form.css';
import AlertDismissible from '../auth/preregister/Alert';

import {
  Badge,
  Button,
  Col,
  ComponentClass,
  Feedback,
  FormControl,
  FormGroup,
  Table,
  Row,
  Container
} from 'react-bootstrap';
import Alert from 'react-bootstrap/Alert';

const style1 = {
  width: '60%',
  margin: 'auto'
};

const style2 = {
  paddingTop: '2em'
};

const style3 = {
  marginRight: '2em'
};

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
  role: '',
  consent: false,
  createdAt: ''
};

class PreregForm extends React.Component {
  constructor(props) {
    super(props);

    // the flag isFormDone will control where you will show the Alert component
    this.state = {
      showAlert: false
    };
  }
  handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    const payload = {
      ...formState,
      role: formState.role.value,
      createdAt: firebase.firestore.FieldValue.serverTimestamp()
    };
    console.log('formvalues', payload);

    fsDB
      .collection('preregistrations')
      .add(payload)
      .then(docRef => {
        resetForm(initialValues);
      })
      .then(e => this.setState({ showAlert: true }))
      .catch(error => {
        console.error('Error adding document: ', error);
      });
  };

  render() {
    const options = [
      { value: 'academic', label: 'Academic Researcher' },
      { value: 'student', label: 'Student (inc PhD)' }
    ];

    // const {isFormDone} = this.state;

    return (
      <div>
        {!this.state.showAlert ? (
          <div>
            <Formik
              initialValues={initialValues}
              validationSchema={Yup.object().shape({
                firstName: Yup.string().required('First Name is required'),
                lastName: Yup.string().required('Last Name is required'),
                email: Yup.string()
                  .email('Email is invalid')
                  .required('Email is required'),
                role: Yup.string()
                  .nullable()
                  .required(
                    'It will help us get started if we know a little about your background'
                  ),
                consent: Yup.boolean().oneOf(
                  [true],
                  'You must accept the Terms of Use and Privacy Policy'
                )
              })}
              onSubmit={this.handleSubmit}
              render={({
                errors,
                status,
                touched,
                setFieldValue,
                setFieldTouched,
                handleSubmit,
                isSubmitting,
                dirty,
                values
              }) => {
                return (
                  <div>
                    <Temporarynav />
                    <Form style={style1}>
                      <h1 style={style2}>Get Started</h1>
                      <p>
                        We're almost ready to open this up to the research
                        community. By registering now, you'll be first in line
                        when the doors open.
                      </p>
                      <div className="form-group">
                        <label htmlFor="firstName">First Name</label>
                        <Field
                          name="firstName"
                          type="text"
                          className={
                            'form-control' +
                            (errors.firstName && touched.firstName
                              ? ' is-invalid'
                              : '')
                          }
                        />
                        <ErrorMessage
                          name="firstName"
                          component="div"
                          className="invalid-feedback"
                        />
                      </div>
                      <div className="form-group">
                        <label htmlFor="lastName">Last Name</label>
                        <Field
                          name="lastName"
                          type="text"
                          className={
                            'form-control' +
                            (errors.lastName && touched.lastName
                              ? ' is-invalid'
                              : '')
                          }
                        />
                        <ErrorMessage
                          name="lastName"
                          component="div"
                          className="invalid-feedback"
                        />
                      </div>
                      <div className="form-group">
                        <label htmlFor="email">Email</label>
                        <Field
                          name="email"
                          type="text"
                          placeholder="Please use your work email address"
                          className={
                            'form-control' +
                            (errors.email && touched.email ? ' is-invalid' : '')
                          }
                        />
                        <ErrorMessage
                          name="email"
                          component="div"
                          className="invalid-feedback"
                        />
                      </div>
                      <div className="form-group">
                        <label htmlFor="role">
                          Which role best describes yours?
                        </label>

                        <Select
                          key={`my_unique_select_keyrole`}
                          name="role"
                          className={
                            'react-select-container' +
                            (errors.role && touched.role ? ' is-invalid' : '')
                          }
                          classNamePrefix="react-select"
                          value={values.role}
                          onChange={selectedOptions => {
                            // Setting field value - name of the field and values chosen.
                            setFieldValue('role', selectedOptions);
                          }}
                          onBlur={setFieldTouched}
                          options={options}
                        />
                        {errors.role && touched.role && (
                          <ErrorMessage
                            name="role"
                            component="div"
                            className="invalid-feedback d-block"
                          />
                        )}
                      </div>

                      <div className="form-group">
                        <div className="checkbox-wrapper">
                          <Field
                            name="consent"
                            type="checkbox"
                            checked={values.consent}
                            className={
                              'checkbox' +
                              (errors.consent && touched.consent
                                ? ' is-invalid'
                                : '')
                            }
                          />
                          <label
                            htmlFor="consent"
                            className="checkbox_label_wrapper"
                          >
                            You must accept the{' '}
                            <Link className="links" to={'/Terms'}>
                              Terms of Use
                            </Link>{' '}
                            and{' '}
                            <Link className="links" to={'/Privacy'}>
                              Privacy Policy
                            </Link>
                          </label>
                        </div>

                        {errors.consent && touched.consent && (
                          <ErrorMessage
                            name="consent"
                            component="div"
                            className="invalid-feedback d-block"
                          />
                        )}
                      </div>

                      <div className="form-group">
                        <Button
                          variant="outline-primary"
                          type="submit"
                          style={style3}
                          id="submitRegistration"
                          onClick={handleSubmit}
                          disabled={!dirty || isSubmitting}
                        >
                          Register
                        </Button>
                      </div>
                    </Form>
                    <Demo />
                    <Footer />
                  </div>
                );
              }}
            />
          </div>
        ) : (
          <AlertDismissible />
        )}
      </div>
    );
  }
}

export default PreregForm;