so i have this component in my app called YearSelection that does not update instantly on click even though i think it should. why? it does update when the component is closed and opened again.

goal of this, is to have this type of component that has current year in the middle and a button above and below with year + 1 and – 1 respectively, updating all of the year buttons + 1 or – 1 onclick as the middle one should be the selector.

this is the associated stuff inside said component:

function YearSelection({ year, onAddYear, onSubtractYear, onSubmitYear }) {
    <form className="year-selection" onSubmit={onSubmitYear}>
        <button type="button" className="year-next" onClick={onAddYear}>{year + 1}</button>
        <button type="button" className="year-curr">{year}</button>
        <button type="button" className="year-prev" onClick={onSubtractYear}>{year - 1}</button>
   </form>
}

export default YearSelection

, this component is a child of an Admin component, here is the associated stuff from that component.

import YearSelection from "./YearSelection";

function Admin({ year, onAddYear, onSubtractYear, onSubmitYear }) {
    switch (route) {
    case 'example':
    adminContent = (
        <div className="admin-container">
        <button className="year-button" onClick={() => handleClick(
            <YearSelection
              year={year}
              onAddYear={onAddYear}
              onSubtractYear={onSubtractYear} 
              onSubmitYear={onSubmitYear}
            />)}>
              {year}
            </button>
         </div>
      );  
      break;
    default:
      adminContent = null;
  return <>{adminContent}</>;
}

export default Admin;

, this component is a child of a Dashboard component where also all of the state is currently stored, here is the associated stuff from that one:

import { useState } from 'react';
import Admin from '../components/Admin';

function Dashboard() {
const currentYear = new Date().getFullYear();
const [year, setYear] = useState(currentYear);

const handleAddYear = () => {
    setYear(prevYear => prevYear + 1);
  };

const handleSubtractYear = () => {
    setYear(prevYear => prevYear - 1);
  };

const handleSubmitYear = (e) => {
    e.preventDefault();
  };

    return (
          <Admin
            year={year}
            onAddYear={handleAddYear}
            onSubtractYear={handleSubtractYear}
            onSubmitYear={handleSubmitYear}
          />
)};

so my question really is, what gives? i have asked every single way of this question from chatgpt and i honestly got no clue whats going on. this question also breaks chatgpt as is because it will just repeat this same answer.

i have tried to use chatgpt 4o because i thought maybe that could fix it but to no success.