I have 2 components, the parent has a state, and the child uses the state and changes, but the component is not redrawn.

parent

function Today() {
  const [pageDate, setPageDate] = React.useState(new Date());
  ...
  return (
    <div className={styles.root}>
      <DateSelector pageDate={pageDate} setPageDate={setPageDate} />
    </div>
  );
}

child

function DateSelector({ pageDate, setPageDate }) {
  const options = {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  };

  const onClickNextDate = () => {
    pageDate.setDate(pageDate.getDate() + 1);
    setPageDate(pageDate);
  };
  return (
    <div className={styles.wrapper}>
      <p>{pageDate.toLocaleDateString('en-EN', options)}</p>
      <p className={styles.arrow} onClick={onClickNextDate}>
        next
      </p>
    </div>
  );
}

child component is not being redrawn, when I click on onClickNextDate