React hook invalid when react-chartjs-2 included

Inputting a into a grid component of material UI results in an invalid hook call.

Expected Behavior

Expected there to be a simple line graph in the grid with the example data taken from the chartjs github.

Actual Behavior

Error: Invalid hook call

URL, screen shot, or Codepen exhibiting the issue

// material
import { Container, Box, Typography, Grid } from '@mui/material';
import { useState, React } from 'react';
import { makeStyles } from '@mui/styles';
import { Line } from 'react-chartjs-2';
// components
import Page from '../components/Page';
import DropDown from '../components/DropDown';
import DashBox from '../components/DashBox';

// ----------------------------------------------------------------------

const data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: false,
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(255, 99, 132, 0.2)'
    }
  ]
};

const options = {
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

// I think after I build it, we can reuse the filters, like in the dashboard, add a new filter depending on what we want to add
// filling in the filters should be a query that returns the options, ie the cohorts can be done via getting the distinct cohorts
export default function Finances() {
  const optionsCohort = ['Cohort One', 'Cohort Two', 'Cohort Three'];
  const optionsDate = ['One', 'Two'];
  const [componentsFinancial, setComponentsMember = useState([
    {
      title: 'Members',
      urlOne: 'http://api/memberone',
      reportOneTitle: 'Count One',
      urlTwo: 'http://api/membertwo',
      reportTwoTitle: 'Count Two'
    }
  ]);

  return (
    <Page title="Finances">
      <Line data={data} options={options} />
      <Container>
        <Typography variant="h4" sx={{ mb: 5 }}>
          Financial Page
        </Typography>
        <Container marginBottom="10px">
          <Typography marginLeft="5px" variant="h5">
            Filters
          </Typography>
          <Grid
            columns={5}
            sx={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'stretch',
              marginTop: '10px',
              marginLeft: '5px',
              justifyContent: 'space-evenly'
            }}
          >
            <Grid item sx={{ pr: 5 }}>
              <DropDown options={optionsDate} title="Date" />
            </Grid>
          </Grid>
        </Container>
        <br />
        <Box
          container
          sx={{ border: 2 }}
          marginLeft="20px"
          pr="20px"
          pb="20px"
          pl="20px"
          width="100%"
        >
          <Typography variant="h3">Financial Dashboard</Typography>
          <DashBox components={componentsFinancial} />
        </Box>
        <Grid>
          <Grid item>
            <Typography>Member Count</Typography>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}

Steps to Reproduce

See above.

Your Environment

Browser Name and version: Firefox Operating System and version (desktop or mobile): Windows desktop React dom and React have the same version number of 17.0.2 Code works before the chart is added There are some custom items here (ie DashBox)

[dangreen]

@aunshx Hi. Would you please fork this sandbox and reproduce the issue?

[dangreen]

@stebbinscp Hi. Would you please fork this sandbox and reproduce the issue?