Cards não aparecem

const [extras, setExtras] = useState([])

  const aoNovoExtraAdicionado = (extra) => {
    console.log(extra)
    setExtras([...extras, extra])
  }

  return (
    <div className="App">
      <Banner />
      <Formulario areas={areas.map(area => area.nome)} 
      aoExtraCadastrado = {extra => aoNovoExtraAdicionado(extra)}
      />
      {areas.map(area => <Area 
      key={area.nome} 
      nome={area.nome} 
      corPrimaria={area.corPrimaria}
      corSecundaria={area.corSecundaria}
      extras={extras}
      />)}


    </div>
  );
}

export default App;

import Extras from '../Extras'
import './Areas.css'

const Area = (props) => {
    return(

        <section className='area'style={{backgroundColor: props.corSecundaria}}>
            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
            {props.extras.map(extra => <Extras />)}

        </section>
    )


}
export default Area