Map is only displaying one item in it - reactjs

Question

I am trying to display the items in the array, but only one item is being displayed. I have tried changing id, although it didnt work.
import React, { useState } from 'react';
import Note from './noteItself';
const NoteItems=[
{id:1, message:'asdf',title:'New Note'},
{id:2, message:'asdf',title:'e'}
]
const NoteDisplay = () => {
return (
<div className="note-container">
{NoteItems.map((items)=><Note items={items}/>)}
</div>
)
}
export default NoteDisplay;
import React from 'react';
const Note = ({items}) => {
console.log(items);
return (
<div className="note-box">
<h1 className="note-title">{items.title}</h1>
</div>
)
}
export default Note;
css
.note-container { display: flex; }
.note-box { flex-direction: row; flex-grow: 1; height: 181px; width: 181px; border-radius: 20px; position: absolute; left: 22.09%; right: 65.94%; top: 26.58%; bottom: 54.99%; background: #ffffff; box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.09); border-radius: 20px; }

Answer 1

Since you have absolute positioning on the note-box class, all the items are going to get rendered on top of each other. You will want to remove all of your absolute positioning (position: absolute; left: 22.09%; right: 65.94%; top: 26.58%; bottom: 54.99%;) to let flexbox arrange your items.