Bug: PixiComponent type issue with Container

[rnike]

Current Behavior

Type error when using PixiComponent with Container in typescript after upgrade the package version to below

• @pixi/react version: 7.1.1
• pixi.js version: 7.3.1
• @pixi/display version: 7.3.1

import { Container as PixiContainer } from '@pixi/display';
import { Container, PixiComponent, applyDefaultProps } from '@pixi/react';
import { ComponentProps } from 'react';

// Type 'Container<DisplayObject>' does not satisfy the constraint 'DisplayObject'.
export default PixiComponent<ComponentProps<typeof Container>, PixiContainer>(
  'CustomContainer',
  {
    create: () => new PixiContainer(),
    applyProps: applyDefaultProps,
  }
);

Type 'Container<DisplayObject>' does not satisfy the constraint 'DisplayObject'.
  Types of property 'children' are incompatible.
    Type 'DisplayObject[]' is not assignable to type 'readonly FederatedEventTarget[]'.
      Type 'DisplayObject' is not assignable to type 'FederatedEventTarget'.
        The types returned by 'parent.eventNames()' are incompatible between these types.
          Type '(keyof DisplayObjectEvents)[]' is not assignable to type '(string | symbol)[]'.
            Type 'keyof DisplayObjectEvents' is not assignable to type 'string | symbol'.
              Type 'number' is not assignable to type 'string | symbol'.ts(2344)

No type error before upgrade, packages version below

• @pixi/react version: 7.0.3
• pixi.js version: 7.2.4
• @pixi/display version: 7.2.4

Expected Behavior

Don't have any type error after upgrade pixi packages

Steps to Reproduce

1. Install the package version in a typescript react project

   • @pixi/react version: 7.0.3
   • pixi.js version: 7.2.4
   • @pixi/display version: 7.2.4

2. Create a component below

   
   import { Container as PixiContainer } from '@pixi/display';
   import { Container, PixiComponent, applyDefaultProps } from '@pixi/react';
   import { ComponentProps } from 'react';

// Type 'Container' does not satisfy the constraint 'DisplayObject'. export default PixiComponent<ComponentProps, PixiContainer>( 'CustomContainer', { create: () => new PixiContainer(), applyProps: applyDefaultProps, } );

3. Upgrade packages to the following version
- **`@pixi/react` version**: *7.1.1*
- **`pixi.js` version**: *7.3.1*
- **`@pixi/display` version**: *7.3.1*

4. Component created in step 2 has type error

### Environment

- **`@pixi/react` version**: *7.1.1*
- **`pixi.js` version**: *7.3.1*
- **`@pixi/display` version**: *7.3.1*
- **`ReactDOM` version**: *18.2.0*
- **`react` version**: *18.2.0*
- **`typescript` version**: *5.0.4*

### Possible Solution

_No response_

### Additional Information

_No response_

[rnike]

Follow up:

Found out it might be an issue related to Container's type declaration, simply new a Graphics and add into Container, it shows type error below

[ArthurTimofey]

Same problem here, work around for me is the following:

import P from 'pixi.js';
import { PixiComponent } from '@pixi/react';

type FloorPlanGeneratorDataItem = {
    path: string;
};

type FloorPlanGeneratorProps = {
    data: FloorPlanGeneratorDataItem[];
};

export const FloorPlanGenerator = PixiComponent<
    FloorPlanGeneratorProps,
    P.DisplayObject
>('FloorPlanGenerator', {
    create: ({}) => {
        return new P.Graphics() as P.DisplayObject; // cast it back to DisplayObject for now
    },
});