Q:

Implementing a calander from Material-UI that uses Hooks in one of my components

I'm new to React and JavaScript in general and trying my hand on a web app. I want to implement a calandar picker I found from Material-UI, https://material-ui-pickers.dev/getting-started/usage
In the start guide it uses hooks to make the calendar but it seems like I cant use one within my component.
I tried moving the function out of my class and calling it in the class but I get the same error so guess that's a no can do.
class GameList extends Component {
  state = {};

  render() {
    const { classes } = this.props;
    return (
      <div id="gameList">
        {BasicDatePicker()}
      </div>
    );
  }
}

export function BasicDatePicker(){
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />
      </MuiPickersUtilsProvider>
  );
}

export default (GameList);

The Error I recieve is the following:
"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: 
1. You might have mismatching versions of React and the renderer (such as React DOM) 
2. You might be breaking the Rules of Hooks 
3. You might have more than one copy of React in the same app"
As far as I can see the rule of hook im breaking is that it is being used inside a class but I don't see another way of using the calendar in my component then.

A:

Instead of executing BasicDatePicker component like this BasicDatePicker(), use JSX tag <BasicDatePicker />
function BasicDatePicker(){
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={handleDateChange}
        animateYearScrolling
      />
      </MuiPickersUtilsProvider>
  );
}

class GameList extends Component {
  state = {};

  render() {
    const { classes } = this.props;
    return (
      <div id="gameList">
        <BasicDatePicker />
      </div>
    );
  }
}

export default (GameList);

