React component with a 3 button(+,-,submit) counter that doesnt update

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 only 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 }) {
    return (
    <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?