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

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>
  );
}

<Nav>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox1"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox1" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox2"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox2" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
  <Nav.Item>
    <Nav.Link
      eventKey={"checkbox3"}
      as={(props) => (
        <a {...props} href={"#"}>
          <Form.Check type="checkbox" id="checkbox3" /> {"nav link1"}
        </a>
      )}
    />
  </Nav.Item>
</Nav>