I'm having a problem styling this component. I have added some styles but they are not reflecting. What might be the problem?

```
import React,{useContext} from 'react'
import "./display.css"
import { AppContext } from '../App'

const Display = () => {

    const styles={
        backgroundColor:"white"
    }
    const{type, stateWord,definition,synonyms}=useContext(AppContext)
  return (
    <div styles={styles} className='container'>
        <section styles={styles}>
 {stateWord && <div style={{color:"white"}}><h4> Word Type: {type}</h4>
 <h4>Definition : {definition}</h4>
 <h4>Synonyms:</h4>
 {synonyms.map((syn)=>{
     return<div><h4>{syn}</h4></div> 
 })}

  </div> 
 }

        </section>

    </div>
  )
}

export default Display

```