how to instruct react app to use custom eslint rules directory?

hi ive created a custom eslint rule id like to apply to my react app. My rules are stored in a lint-rules directory in the root of the project.

here is the rule:

module.exports = {
  meta: {
    type: 'problem',
    messages: {
      match:
        'When handling promises, use ES6 Async Await syntax.'
    }
  },
  create: (context) => ({
    MemberExpression (node: any) {
      if (node.callee.name === 'then' || node.callee.name === 'catch') {
        context.report({
          node,
          message: 'Use async await syntax when handling promises'
        });
      }
    }
  })
};

here is my eslintrc config file:

root: true
globals:
  JSX: true
env:
  browser: true
rules:
  "react/jsx-closing-bracket-location": ["warn", "line-aligned"]
  "es6-promise-syntax": "error"
extends:
  - 'react'

Now all my files have this error message: Definition for rule 'es6-promise-syntax' was not found.eslint(es6-promise-syntax) How can I link my directory with my rules to the eslint config so that it can find my custom rules? I have linting on save setup through my settings in settings.json via:

  {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    }
}

kind regards