Property 'children' does not exist on type 'AriaCheckboxGroupProps'

Question

Currently working on some React components using React-Aria. I just made 'Checkbox' and now I'm working on 'CheckboxGroup'.

I literally copied the documentation of useCheckboxGroup(), see documentation here, and I'm getting this error: Property 'children' does not exist on type 'AriaCheckboxGroupProps' on the value={state}.

Any ideas on how to fix it ?
Maybe I'm doing something wrong or they just didn't change the documentation ?

Here is the code -- CheckboxGroup.tsx:

import './CheckboxGroup.sass';

import { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';
import { useCheckboxGroupState } from 'react-stately';
import { createContext } from 'react';

let CheckboxGroupContext = createContext(null);

function CheckboxGroup(props) {
  let { children, label, description, errorMessage } = props;
  let state = useCheckboxGroupState(props);
  let { groupProps, labelProps, descriptionProps, errorMessageProps } =
    useCheckboxGroup(props, state);

  return (
    <div {...groupProps}>
      <span {...labelProps}>{label}</span>

      <CheckboxGroupContext.Provider value={state}> {/* ERROR HERE */}
        {children}
      </CheckboxGroupContext.Provider>

      {description && (
        <div {...descriptionProps} style={{ fontSize: 12 }}>{description}</div>
      )}

      {errorMessage && state.isInvalid && (
        <div {...errorMessageProps} style={{ color: 'red', fontSize: 12 }}>
          {errorMessage}
        </div>
      )}
    </div>
  );
}

export default CheckboxGroup;

Answer 1

You have to tell the component it's going to have children.

Depending on the version of React you're using, React requires children to be listed explicitly. React Docs.

You can either create a new interface or type, extending AriaCheckboxGroupProps and adding children?: ReactNode, or you can type your props like:

props: React.PropsWithChildren<AriaCheckboxGroupProps>

You'll need to import React from 'react', or just import PropsWithChildren and don't use the 'React.' to do it this way.