Getting General element type is invalid when using reactstraps collapse

Question

What I'm trying to do is make it so oldForms.js makes a call to the database for the data, as well as rendering FormDisplayer.js. That then displays basic data about a form and renders a collapsible View for each form that is pulled from the database. basically if there are 3 forms in the database it renders three collapsible views that when clicked on review the full form. That's what I'm trying todo but I keep running into this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. From what I've read its a very general error but I don't see anything hugely wrong with my code. I've been using reacstraps documentation to try to get it to work but I'm trying to do something a bit different in terms of rendering it a variable amount of them. I've also tried going through the suggestions on this post, but at this point I might just need fresh eyes on my code. Please let me know if you need any more information like the data model or app.js. Thank you in advance for your help.

oldForms.js

import React, { Component, View } from "react";
import { Container, ListGroup, ListGroupItem, Card, Button, CardBody, Collapse } from "reactstrap";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import classnames from "classnames";
import { getItems } from "../../actions/itemActions";
import "../../App.css";
import PropTypes from 'prop-types';

import FormDisplayer from '../form/FormDisplayer';

class oldForms extends Component {

componentDidMount() {
    this.props.getItems();
}

render() {
    const { items } = this.props.item;

    return (
        <Container id="formInput">
            <ListGroup>
                <TransitionGroup className="form-list" class="form-list">
                    {items.map(({ _id, location, tech, machine, date
                    }) => (
                                <FormDisplayer _id={_id} location={location} tech={tech} machine={machine} date={date}/>
                        ))}
                </TransitionGroup>
            </ListGroup>
        </Container>
    );
  }
}

oldForms.propTypes = {
    getItems: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired,
    deleteItem: PropTypes.func.isRequired
}

const mapStateToProps = state => ({
    item: state.item
})

export default connect(mapStateToProps, { getItems })(oldForms);

FormDisplayer.js

import React, { useState, View } from 'react';
import { ListGroupItem, Card, Button, CardBody, Collapse } from 'reactstrap';
import { CSSTransition} from 'react-transition-group';
import "../../App.css";

const FormDisplayer = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);

return (
    <View>
        <CSSTransition key={props._id} timeout={500} className="fade">
            <Button color="primary" onClick={toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
            <Collapse isOpen={isOpen}>
                <Card>
                    <CardBody>
                        <ListGroupItem>
                            <div className="form-data">
                                <ul classname="list-items">
                                    <li>Location: {props.location}</li>
                                    <li>Tech: {props.tech}</li>
                                    <li>Machine: {props.machine}</li>
                                    <li>Date: {props.date}</li>
                                </ul>
                            </div>
                        </ListGroupItem>
                    </CardBody>
                </Card>
            </Collapse>
        </CSSTransition>
    </View>
 );
}

export default (FormDisplayer);