css styles not loaded with the library

[kenza15a]

hello i tried to follow your tutorial though the styles of my component are not loaded with it when i import the library any hints ?
hereis my comonent
import React from 'react'
import './index.css'
function ModalComponent({
isOpen,
contentComponent,
closeFunction,
okButtonState,
buttonFunction,
buttonText
}) {
if (!isOpen) return null;

return (

<React.Fragment>

    <div className="modal-overlay" onClick={closeFunction}>
     
      {/*close the modal when i click outside */}
      <div className="modal" onClick={(e) => e.stopPropagation()}>
       
        {/*to stop the closing event when i click inside the modal */}
        <div className="modal-content">
          <span className="close" onClick={closeFunction}>
            &times;
          </span>
          <div className="modal-main-content">
          {contentComponent}
          {okButtonState && (   <button className="modal-confirmation" onClick={buttonFunction}>{buttonText}</button>)}
          </div>
       </div>
        </div>
      </div>
    
  </React.Fragment>
);

}

export default ModalComponent;

my css
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

/* modal styles*/
.modal-main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}

button.modal-confirmation {
padding: 1rem;
font-size: 1.5rem;
font-family: 'Lato';
border-collapse: collapse;
width: fit-content;
-webkit-box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.66);
box-shadow: 0px 4px 5px -1px rgba(0, 0, 0, 0.4);
}

button.modal-confirmation .button {
background-color: green;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
/* Ensure the modal is on top of other content */
}

.modal {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 1rem;
position: relative;
width: 60vw;
max-width: 50vw;
max-height: 70vh;
min-height: fit-content;
overflow-y: auto;
scroll-behavior: smooth;
border-radius: 1rem;
z-index: 1001;
text-align: center;
}

.close {
position: absolute;
top: 3%;
right: 5%;
font-size: 3rem;
color: greenyellow;
cursor: pointer;
}

and here is mmy index.js

import ModalComponent from './ModalComponent'
export default ModalComponent;