الربط بين component في react js

السلام عليكم.

في الكود التالي:

import React,{useState} from 'react'
import './Notes.css'
import Note from './Note'

function Notes() {
  const arr = ["A","B","C","D"]
  const [count,setCount] = useState(0)
  const handleAdd = () => {
    if (count < arr.length) {
      setCount(count+1)
      console.log(arr[count]);
    }
  }
  return (
    <div className='notes'>
      {
        arr.map((el,i)=> (
          <Note title={el} key={i} i={i} />
        ))
      }
      <button className='add-btn' onClick={handleAdd}>+</button>
    </div>
  )
}

export default Notes

كيف يمكنني الربط بين button و Note بحيث عند الضغط على الزر يضاف عنصر جديد من المصفوفة arr.

شيفرة Note

import React,{} from 'react'

function Note({title,i}) {
    
  return (
    <h2 className='note'>
        {i}: {title}
    </h2>
  )
}

export default Note

شكرا لكم.