问如何勾选导航链接中的复选框？

EN

import React, { useState } from "react";
import { Nav, Form } from "react-bootstrap";
import "./styles.css";

export default function App() {
  const [checkboxes, setCheckboxes] = useState({});

  const hadleClick = (key) => {
    setCheckboxes({
      ...checkboxes,
      [key]: !checkboxes[key]
    });
  };

  return (
    <Nav>
      <Nav.Item onClick={() => hadleClick("one")}>
        <Nav.Link>
          <Form.Check
            onClick={() => hadleClick("one")}
            type="checkbox"
            checked={checkboxes.one}
            id="checkbox1"
            name="checkbox1"
            label="OK 1"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("two")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.two}
            type="checkbox"
            id="checkbox2"
            name="checkbox2"
            label="OK 2"
          />
        </Nav.Link>
      </Nav.Item>
      <Nav.Item onClick={() => hadleClick("third")}>
        <Nav.Link>
          <Form.Check
            checked={checkboxes.third}
            type="checkbox"
            id="checkbox3"
            name="checkbox2"
            label="OK 3"
          />
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}