How to fix a bad Material React Table display

Question

I am using an instance of Version 2 of a Material React Table. As an experiment, I took the code from the Basic example on the Material React Table website:

https://www.material-react-table.com/docs/examples/basic

and successfully compiled and ran it.

I wanted to limit the size of the table (I wanted to put other things on the page) so I put the table into a div component:

const Example = () => {
<<Data definitions removed for brevity>>

    return(
        <div className={"viewpanel"}>
            <h2>Person List</h2>
            <MaterialReactTable table={table} />
        </div>
    );

When the table gets rendered, a strange thing happens: the table is displayed within the div but it doesn't completely fill the div. It fills the div lengthwise but its height appears fixed to about a quarter of the height of the div. Furthermore, the pagination system doesn't appear to be working (the pagination buttons aren't appearing!) and the controls at the top (search, filter, etc) appear to be cut off at the top of the table.

A picture of the bad display is attached. Note that I changed the data in the table so that there is only one row, and it displays some basic person data.

I have looked through the documentation and can find no reason for this behavior of the table display. Can someone give some insight on what is causing my table to display incorrectly? How can I fix this table display?