How to return a component in React

i have a button component from material UI. What i wanna do is i click a button and it renders to me a new Button on the screen.
That’s what i did

const [button, setButton] = useState([]);

function addButton(){

 let newObj = {
      button: <Button variant="contained"> A Button</Button>,
    };

 setButton([...button, newObj])

}

And then in the main function return i did

{button.length !== 0 ? (
        button.map((item) => {
          <div>{item.button}</div>;
        })
      ) : (
        <div>Hello</div>
      )}

What am i doing wrong?

>Solution :

You forgot to return the component in the map function
like this

{button.length !== 0 ? (
        button.map((item) => {
         return (<div>{item.button}</div>);
        })
      ) : (
        <div>Hello</div>
      )}

the map function with no ‘return’ keyword must not have the bracket { }
like this

   button.map((item) => (<div>{item.button}</div>))