'propType "name" is not required, but has no corresponding defaultProps declaration

I have a component with optional props. I'm defining the default values of the optional props by passing them to the Card component, nevertheless eslint keeps telling me propType "text" is not required, but has no corresponding defaultProps declaration. The same goes for the children prop. The code below seems to be in line with the example without defaultProps on this page: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-default-props.md.

import { ReactElement } from 'react';

interface CardProps {
  title: string,
  text?: string | (string|ReactElement)[],   // eslint is complaining here
  children?: React.ReactNode                 // and here
}

const Card = ({ title, text = '', children = null }: CardProps) => (
    <div className="container">
      <div className="title">{title}</div>
      <div className="underline" />
      <div className="card">
        <div className="text">
          {text}
          {children}
        </div>
      </div>
    </div>
);

My eslint (7.32.0) config is as follows:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "js": "never",
              "jsx": "never",
              "ts": "never",
              "tsx": "never"
            }
        ],
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"]
    },
    "settings": {
        "import/resolver": {
            "node": {
            "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "globals": {
        "React": true,
        "JSX": true
    }
}


Solution 1:[1]

As @Jack mentioned

export interface Props {
  children?: ReactNode;
}

Exporting the interface worked!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sharky