ESLint: 'React' is defined but never used.(no-unused-vars) when using JSX pragma

How do I stop eslint throwing an error when I use the jsx pragma. I'm using the airbnb config and I've tried adding "react/jsx-uses-react": 1, as a rule which hasn't worked. Do I need to include plugin:react/recommended in the extends when using the airbnb? .eslintrc.js extends: [ "airbnb", "airbnb/hooks", "plugin:react-redux/recommended", "plugin:prettier/recommended", "prettier/react", ], settings: { react: { version: "detect", }, }, plugins: ["emotion", "graphql", "prettier", "react-redux"], rules: { "emotion/jsx-import": "error", "emotion/no-vanilla": "error", "emotion/import-from-emotion": "error", "emotion/styled-import": "error", "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }], "graphql/template-strings": [ `error`, { env: `relay`, tagName: `graphql`, }, ], }, layout.js /* ESLint: 'React' is defined but never used.(no-unused-vars) */ import React from "react" import PropTypes from "prop-types" import { useStaticQuery, graphql } from "gatsby" /** @jsx jsx */ import { Global, css, jsx } from "@emotion/core" import { ThemeProvider } from "emotion-theming"