Packery draggable in React Component

Question

I am building a product grid order tool for an e-commerce website. It allows the merchandiser to change the order in which the products display.

This is achieved through drag-and-drop superpowers of Packery by David Desandro https://packery.metafizzy.co/

Seems there are two ways to do this. Either run his code (with jQuery) in a componentDidMount() {}; or find a React version of Packery, like https://www.npmjs.com/package/react-packery-component . There are a number of these but all present a similar problem. Their examples call the object differently. (Mine has curly braces). And I am getting a frightening TypeError!

TypeError: Cannot read property 'bool' of undefined

       import React, { Component } from 'react'
    import { 
        Card, 
        CardImg, 
        CardBody,
        CardTitle, 
        Input, 
        InputGroup, 
        Container, 
        Row, 
        // Col, 
        Jumbotron 
        } from 'reactstrap';
    import Papa from 'papaparse'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import './App.css'
    import Packery from 'react-packery-component'

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {data: [] };  // State holds gridorder / neworder
            this.handleChange = this.handleChange.bind(this);
            this.updateData = this.updateData.bind(this)
        }

        handleChange(event) {
            event.preventDefault()
            const inventory = event.target.files[0]
            Papa.parse(inventory, {
                header: true,
                complete: this.updateData
            })
        } // END

        updateData(results) {
            const data = results.data
            console.log(data)
            this.setState({data}) // {data:data}
        }

        renderData() {
            return  this.state.data.length > 1 
               ? this.state.data.map((item) => (  // Object in return 
                        <Card className="grid-item" key={item.sku} >
                            <CardImg src={item.image} />
                            <CardTitle> {item.sku} </CardTitle>
                            <CardBody> {item.name} </CardBody>
                        </Card>     
               )) 
               : null         
        }

        render() {
            return (
                <div>
                    <Jumbotron>
                        <form >
                            <InputGroup>
                                Name:
                                <Input type="file" onChange={this.handleChange} />
                            </InputGroup>
                        </form>
                    </Jumbotron>

                    <div className="album">                    
                        <Container>           
                             {/* This throws a TypeError. NOTE: I am calling renderData() */}
                            <Packery className="grid" > {this.renderData()} </Packery> 
                        </Container>
                    </div>
                </div>          
            );
        }
    } // END

    export default App

The reason I am keeping the object in state is because, that is the thing that will change. gridorder in, neworder out. Thank you in advance, for I could sure use the help.