Component not re-rendering when updating state within map function

Question

I don't know why the component isn't re-rendering automatically when I click on the button that runs the function update. I see that the after click on the button, the state updates but the list does not automatically re-render. Isn't the component supposed to re-render when setFoobar is called?

import React, { useEffect, useState } from "react";

const SomeList = () => {
  const [foobar, setFoobar] = useState([
    {
      description: "description1",
      date: "date1",
    },
    {
      description: "description2",
      date: "date2",
    },
  ]);
  const update = () => {
    const newFoobar = foobar;
    newFoobar.push({
      description: "This new item should render in view",
      date: "asdf",
    });
    setFoobar(newFoobar);
  };
  const generateList = foobar((each, idx) => {
    return (
      <div key={idx}>
        <div>{each.description}</div>
        <div>{each.date}</div>
        <div>
          <button onClick={update}>Click</button>
        </div>
      </div>
    );
  });
  return <div>{generateList}</div>;
};

export default SomeList;