React - Electron, using React-Quill package with styles not applying to component

Question

I have this very weird problem with the React-Quill library component. I am importing the component as per the NPM instructions, and the editor does load but without any actual CSS applied

The only when the styles are applied are when I link the stylesheet through CDN in the index.html file

<link rel=“stylesheet” href=“//cdn.quilljs.com/1.2.6/quill.snow.css”>

I’ve tested in a stackblitz the same code and it works without such issues. I am using similar other components such as ‘react-color-palette’ where I do import the styles in the same fashion through the node_modules and there is no problem with it, so it doesn’t make sense to me to be a webpack config problem either but I tested various options with different settings on webpack to no avail. Even added the CSS to my global CSS which works perfectly fine too, but it still doesn’t apply to the React-Quill

For some reason, the CSS isn't targeting the classes, or its scoped out, but I am unable to understand why that happens

Here is the code

import React, { useState } from 'react';
import hljs from 'highlight.js';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
  // syntax: {
  //   highlight: (text: string) => hljs.highlightAuto(text).value,
  // },
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }],
    [{ align: [] }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link', 'image', 'video'],
    ['code-block', 'blockquote'],
    [{ script: 'sub' }, { script: 'super' }],
  ],
  clipboard: {
    matchVisual: false,
  },
  syntax: false,
};

const textFormats = [
  'font',
  'header',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'background',
  'color',
  'script',
  'list',
  'bullet',
  'link',
  'image',
  'video',
  'clean',
  'code-block',
  'indent',
  'list',
  'align',
];

function RichTextEditor() {
  const [value, setValue] = useState('');

  hljs.configure({
    // useBR: false,
    languages: [
      'javascript',
      'java',
      'html',
      'xml',
      'sql',
      'typescript',
      'bash',
    ],
  });

  return (
    <ReactQuill
      value={value}
      onChange={setValue}
      placeholder="Write a new Note"
      modules={modules}
      formats={textFormats}
    />
  );
}

export default RichTextEditor;

Edit

I opened the console and checked in the tags there are styles currently applied for the react-quill, but seems react modifies the class names:

.RichTextEditor__ql-container__SP9Yv

Where it should really just be .ql-container