Material UI snackbars not working properly in Next JS

I am trying to use Material UI components in NextJS but they are not working properly.

import React, { Component } from "react";

// MATERIAL
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";

export default class NewProduct extends Component {
  constructor() {
    super();
    this.state = {
      testSnack: false,
    };
  }

 testSnackbars = () => {
    this.setState({ testSnack: true });
 };

  render(){
     return{
       <>
       <Snackbar
      open={this.state.testSnack}
      autoHideDuration={5000}
      onClose={this.handleClose}
    >
      <MuiAlert
        elevation={6}
        variant="filled"
        onClose={this.handleClose}
        severity="success"
      >
        Product Added!
      </MuiAlert>
    </Snackbar>

      <button onClick={this.testSnackbars}>
        Save
      </button>
    </>
    }
  }
}

This is a simple logic for showing snackbar on button click but this doesnt seem to work in NextJs, I use Material in ReactJs very often and this never happened there. Can someone tell me what I'm doing wrong here?

I am not able to run snackbars using my state. If I pass in open={true} property, it shows up but not working through state variable.