fix: pickChildren breaks when components are wrapped in HOC

updated react types, fixed alphabetical sorting in package.json

package.json

@@ -53,7 +53,6 @@
   "devDependencies": {
     "@babel/cli": "^7.14.5",
     "@babel/core": "^7.16.7",
-    "tsx": "^3.8.2",
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.14.5",
@@ -68,6 +67,7 @@
     "@react-bootstrap/babel-preset": "^2.1.0",
     "@react-types/link": "^3.4.4",
     "@react-types/shared": "^3.22.0",
+    "@storybook/react": "^7.4.6",
     "@swc-node/jest": "^1.5.2",
     "@swc/core": "^1.3.35",
     "@swc/jest": "^0.2.24",
@@ -78,16 +78,15 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^28.1.1",
     "@types/node": "^15.12.4",
-    "@types/react": "^18.0.1",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/shelljs": "^0.8.9",
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
-    "@storybook/react": "^7.4.6",
     "chalk": "^4.1.2",
-    "concurrently": "^7.6.0",
     "commitlint-plugin-function-rules": "^1.7.1",
+    "concurrently": "^7.6.0",
     "eslint": "^7.29.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-typescript": "^12.3.1",
@@ -105,19 +104,19 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "npm-check-updates": "^16.10.18",
-    "intl-messageformat": "^10.1.0",
     "execa": "^5.1.1",
     "find-up": "^6.3.0",
     "fs-extra": "^10.0.0",
     "glob": "^8.0.3",
     "graceful-fs": "^4.2.6",
     "gray-matter": "^4.0.3",
     "husky": "^8.0.1",
+    "intl-messageformat": "^10.1.0",
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "jest-watch-typeahead": "1.1.0",
     "lint-staged": "^13.0.3",
+    "npm-check-updates": "^16.10.18",
     "npm-run-all": "^4.1.5",
     "p-iteration": "^1.1.8",
     "parcel": "^2.3.1",
@@ -130,6 +129,7 @@
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
     "tsup": "6.4.0",
+    "tsx": "^3.8.2",
     "turbo": "1.6.3",
     "typescript": "^4.9.5",
     "webpack": "^5.53.0",

packages/utilities/react-rsc-utils/src/children.ts

@@ -1,26 +1,28 @@
-import {Children, isValidElement, ReactNode} from "react";
+import {Children, ComponentType, isValidElement, ReactElement, ReactNode} from "react";
 
 /**
  * Gets only the valid children of a component,
  * and ignores any nullish or falsy child.
  *
  * @param children the children
  */
-export function getValidChildren(children: React.ReactNode) {
-  return Children.toArray(children).filter((child) =>
-    isValidElement(child),
-  ) as React.ReactElement[];
+export function getValidChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => isValidElement(child)) as ReactElement[];
 }
 
 export const pickChildren = <T = ReactNode>(
   children: T | undefined,
-  targetChild: React.ElementType,
+  targetChild: {displayName?: string},
 ): [T | undefined, T[] | undefined] => {
   let target: T[] = [];
 
   const withoutTargetChildren = Children.map(children, (item) => {
     if (!isValidElement(item)) return item;
-    if (item.type === targetChild) {
+    if (
+      targetChild.displayName &&
+      typeof item.type === "object" &&
+      (item.type as ComponentType).displayName === targetChild.displayName
+    ) {
       target.push(item as T);
 
       return null;