React Router change checkbox state in Link component from another child component?

Hello I know this is a lot of code and I tried to only include the necessary bits. I am using React router for the first time, and I have a Link Component that has an input checkbox. I simply want to change that checkbox true/false state, but from the corresponding Module component. So in Module 1 would click done, then in the menu.js Module 1's checkbox is checked, WITHOUT checking all the others... I have been stuck on this for 2 days. Maybe i should move the input outside the Link component?

APP.JS----------------

function App() {
  return (
    <AppProvider>
      <Switch>
        <Route exact path="/" component={Menu} />
        <Route path="/Module/:num" component={Template} />
      </Switch>
    </AppProvider>
  );
}

MENU.JS----------------

export default function Menu() {
  const modules = [
    {
      title: `Introduction`,
      subtitle: "Lesson 1",
    },
    {
      title: `Overview`,
      subtitle: "Lesson 2",
    },
    {
      title: `HR`,
      subtitle: "Lesson 3",
    },
 
  const context = useContext(AppContext);

  return (
    <>
        {modules.map((module, index) => (
           <Link key={index} to={`/Module/${index + 1}`} className={styles.menuCard}>
             <h2>{module.title}</h2>
             <p>{module.subtitle}</p>
             <input key={index} type="checkbox" checked={context.completed1} />
           </Link>
         ))}
    </>
  );
}

TEMPLATE.JS----------------

const components = {
  Module1,
  Module2,
  Module3,
};

const providers = {
  Mod1Provider,
  Mod2Provider,
  Mod3Provider,
};

export default function Template({ match }) {
  const {
    params: { num },
  } = match;

  const MyContext = providers["Mod" + num + "Provider"];
  const Template = components["Module" + num];

  return (
    <MyContext>
      <Template number={num} />
    </MyContext>
  );
}

Module 1, 2 ,3 LOOK SIMILAR--------

return (
    <>
        <button
          onClick={() => {
           context.completionHandler1(true);
          }}
        >
          Done
      </div>
    </>
  );

APPCONTEXT-----THERE mus be a better way to do this but react router throws a wrench into it???

function AppProvider(props) {
  const [number, setNumber] = useState();
  const [completed1, setCompleted1] = useState(false);
  const [completed2, setCompleted2] = useState(false);
  const [completed3, setCompleted3] = useState(false);

  function completionHandler1(value) {
    setCompleted1(value);
  }
  function completionHandler2(value) {
    setCompleted2(value);
  }
  function completionHandler3(value) {
    setCompleted3(value);
  }

  const value = {
    number: number,
    completed1: completed1,
    completed2: completed2,
    completed3: completed3,
    completionHandler1: completionHandler1,
    completionHandler2: completionHandler2,
    completionHandler3: completionHandler3,

  };

  return <AppContext.Provider value={value}>{props.children}</AppContext.Provider>;
}

export { AppContext, AppProvider };