I tried using React.memo() to prevent re-rendering on one of my components but it keeps on re-rendering whenever there are changes on its Parent Component.

Here's my child component with React.memo()

const Transactions = React.memo(() => {
  console.log('rerender')

  return (
    <></>
  )
})

Here's where it's being called. Whenever I click the Add button it calls the state function setModal(true), Transactions component is being re-rendered

const ScholarHistory = ({setModal}) => {
  return (
    <div className="pml-scholar pml-scholar--column">
      <div className="pml-scholar-container">
        <button onClick={() => setModal(true)} className="pml-scholar-add-button"> Add </button>
      </div>

    <Transactions />
    </div>
  )
}

I am new to React and been exploring/creating wider projects. Any ideas why it keeps on re rendering? Thanks!