React.Children.only expected to receive a single React element child.

[Mert Genç]

I created a component using createBox like this:

import { Theme } from "@/lib/theme";
import { createBox } from "@shopify/restyle";
import React from "react";
import {
  Keyboard,
  TouchableWithoutFeedback,
  TouchableWithoutFeedbackProps,
} from "react-native";

export const BaseTouchableWithoutFeedback = createBox<
  DealerTheme,
  TouchableWithoutFeedbackProps
>(TouchableWithoutFeedback);

export type BaseTouchableWithoutFeedbackProps = React.ComponentProps<
  typeof BaseTouchableWithoutFeedback
>;

export const KeyboardDismissView = ({
  children,
  ...rest
}: BaseTouchableWithoutFeedbackProps) => {
  return (
    <BaseTouchableWithoutFeedback onPress={Keyboard.dismiss} {...rest}>
      {children}
    </BaseTouchableWithoutFeedback>
  );
};

and I'm trying to use my screen like that:

import React from "react";
import Box from "./box";
import Text from "./text";
import { KeyboardDismissView } from "./touchableWithoutFeedback";

type Props = {};

const MyScreen = (props: Props) => {
  return (
    <KeyboardDismissView>
      <Text> Test</Text>
      <Box>Area</Box>
    </KeyboardDismissView>
  );
};

export default MyScreen;

I can't forward multiple children this component. This give me an error:

React.Children.only expected to receive a single React element child.

I know I can solve problem using Fragment but I think I'm doing something wrong. Any idea about this?

 "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.5.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "@shopify/restyle": "^2.1.0",
    "@tanstack/react-query": "^4.3.9",
    "axios": "^0.27.2",
    "i18next": "^22.0.1",
    "i18next-http-backend": "^1.4.4",
    "react": "18.0.0",
    "react-hook-form": "^7.36.1",
    "react-i18next": "^11.18.6",
    "react-native": "0.69.3",
    "react-native-confirmation-code-field": "^7.3.1",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-localize": "^2.2.4",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "^2.12.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-svg": "^13.5.0",
    "uuid": "^9.0.0",
    "zustand": "^4.1.1"
  },