React: Checkbox not updating when inside a menu tag

I was trying to create a filter for my website for things like category and color and needed some sort of dropdown menu with groups of checkboxes within. Since you should only be able to check one element withing each checkbox group, i decided to just set the value of the others to false whenever one was clicked. However i ran into this issue when trying to get it to work in conjunction with the menu:

Whenever i try to update my checkbox, inside the menu tag programmatically it is not updated. However if i place it outside the menu tag it works fine. (I'm using a context api to update my states). Anyone know what i might have overlooked? Thanks in advance!

const Filters: React.FC = () => {
  const state = useContext(ContextStore);
  return (
    <div>
      <Menu
        forceSubMenuRender={true}
        style=
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <span>Category</span>
            </span>
          }
        >
          <Checkbox.Group style= onChange={onChange}>
            <Checkbox
              style=
              value={"jewelry"}
              checked={state.filterChecked}
            >
              Jewelry
            </Checkbox>
            <Checkbox style= value={"paintings"}>
              Paintings
            </Checkbox>
            <Checkbox style= value={"ceramics"}>
              Ceramics
            </Checkbox>
          </Checkbox.Group>
        </SubMenu>

        
      </Menu>
      <Checkbox
        style=
        value={"jewelry"}
        checked={state.filterChecked}
      ></Checkbox>
    </div>
  );

  function selectOnlyThis(id: any) {
    var myCheckbox = document.getElementsByName("myCheckbox");
    Array.prototype.forEach.call(myCheckbox, function (el) {
      el.checked = false;
    });
    id.checked = true;
  }

  function onChange(e: any) {
    state.setFilterChecked(!state.filterChecked);
  }
  
  };

export default Filters;