flicker loading with nextjs

I’m trying to use react-multi-select-component inside nextJS with reactJs but i have flickering in the load time. basically, the component appears at the beginning without any styling then looks like the styles get injected a bit late. on load time After load

import React, { useState } from 'react';
import MultiSelectBox from 'react-multi-select-component';

export default function MultiSelect(): JSX.Element {
    const options = [
        { label: 'Grapes 🍇', value: 'grapes' },
        { label: 'Mango 🥭', value: 'mango' },
        { label: 'Strawberry 🍓', value: 'strawberry', disabled: true },
        { label: 'Watermelon 🍉', value: 'watermelon' },
        { label: 'Pear 🍐', value: 'pear' },
        { label: 'Apple 🍎', value: 'apple' },
        { label: 'Tangerine 🍊', value: 'tangerine' },
        { label: 'Pineapple 🍍', value: 'pineapple' },
        { label: 'Peach 🍑', value: 'peach' },
    ];

    const [selected, setSelected] = useState([]);

    return (
        <MultiSelectBox
            options={options}
            value={selected}
            onChange={setSelected}
            labelledBy="Select"
        />
    );
}

[harshzalavadiya]

@mu7amad released v4.0.0 should fix this since CSS is pre-loaded with component not compiled at runtime

[mu7amad]

Thanks for your support, you are right you can’t reproduce it here because a very small page with no other content with it, but in our situation, we have a big page everything normally comes ready from the server but only the multi-select component comes late