reactjs not importing css

I am working with nextsjs based project, here in other pages if I load css like this then it works

import css from './cssname.css';

<div className={css.myclass}></div>

but now I am dealing with a lightbox component I need to import css for this, so I this

import "react-popupbox/dist/react-popupbox.css"

css dosen't work in my code. here is my full code which I copy paste from docs first example.

import React ,{Component} from 'react';
import { PopupboxManager, PopupboxContainer } from 'react-popupbox';
import "react-popupbox/dist/react-popupbox.css"

class lightbox extends Component{

    constructor(props){
        super(props)

        this.openPopupbox = this.openPopupbox.bind(this);
    }

    openPopupbox(){
        const content = (
            <div>
              <p>Work like you don't need the money.</p>
              <p>Dance like no one is watching.</p>
              <p>And love like you've never been hurt.</p>
              <span>― Mark Twain</span>
            </div>
          )
          PopupboxManager.open({ content })
    }

    render(){
        return(
            <div> 
                <button onClick={this.openPopupbox}>Click me!</button>
                <PopupboxContainer/>
            </div>
        )
    }
}

export default lightbox