Don't work checkbox with React Bootstrap Modal in ReactJS

My code is not working. Please help.

import React, { useEffect, useState } from "react";
import { Form, Modal } from "react-bootstrap";
import "react-datepicker/dist/react-datepicker.css";

const OccasionModal = ({ setOccasionModalShow }) => {
  const [occasions, setOccasions] = useState([]);

  useEffect(() => {
    fetch("occasions.json")
      .then((res) => res.json())
      .then((data) => setOccasions(data));
  }, []);
  return (
    <div>
      <div className="container">
        <Modal
          show={true}
          fullscreen={true}
          onHide={() => setOccasionModalShow(false)}
        >
          <Form>
            {["checkbox", "radio"].map((type) => (
              <div key={`inline-${type}`} className="mb-3">
                <Form.Check
                  inline
                  label="1"
                  name="group1"
                  type={type}
                  id={`inline-${type}-1`}
                />
                <Form.Check
                  inline
                  label="2"
                  name="group1"
                  type={type}
                  id={`inline-${type}-2`}
                />
                <Form.Check
                  inline
                  disabled
                  label="3 (disabled)"
                  type={type}
                  id={`inline-${type}-3`}
                />
              </div>
            ))}
          </Form>
        </Modal>
      </div>
    </div>
  );
};

export default OccasionModal;

My code is not working. please help. My code is not working. please help. My code is not working. please help. My code is not working. please help. I try it many times but can't find a solution. I can't identify which problem is happening.