Implementing a simple carousel using react material-ui carousel the Invalid hook call error rises.
Error occurred:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I simplified the documentation starter code as much as I could, but the error still remains. Seems the dependency packages version looks correct and error just rise from the code I had no idea how to fix that.
My code: On stackblitz
import * as React from 'react';
import { Paper, Typography, Button } from '@mui/material';
import Carousel from 'react-material-ui-carousel';
const Demo = (props) => (
<Carousel>
{/* Change above line to <> and it work, maybe some version conflicts?? */}
<Paper>
<Typography>First Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Second Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Third Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
</Carousel>
);
export default Demo;