Using setState on a React menu

menu.js

import React, { useState } from 'react';

function MenuButton() {

  let [menu, setMenu] = useState('closed');

  if (menu === 'open') {
    return (
      <menu__small
      style={{
          height: '2rem',
      }}
  >
        <button onClick={() => setMenu(menu = 'closed')}>Close</button>
        <ul>
          <li>{menu}</li>
          <li>hey</li>
          <li>1223</li>
        </ul>
      </>
    );
  } else {
    return (
      <>
        <button onClick={() => setMenu(menu = 'open')}>Open</button>
        <p>{menu}</p>
      </>
    );
  }
}

// markup
const MenuPage = () => {
  return (
    <main>
      <h1>Menu</h1>
      <MenuButton />
      <p><span role="img" aria-label="unicorn">🦄</span></p>
    </main>
  )
}

export default MenuPage

I'm still not sure this is right it does re-renders but isn't that the point of react