react/jsx-curly-brace-presence "children" "always" complains about whitespace

"eslint": "^4.18.2",
"eslint-plugin-react": "^7.6.1",

I have the prop: "react/jsx-curly-brace-presence":["error", { "props": "always", "children": "always" }], in my .eslintrc file because I’m trying to convert:

<div className="NameCapture_wrapper">
    <p className="NameCapture__question">
        What's your first name?
    </p>
    <NameCaptureNameInput/>
</div>

to:

<div className={`NameCapture_wrapper`}>
    <p className={`NameCapture__question`}>
        {`What's your first name?`}
    </p>
    <NameCaptureNameInput/>
</div>

but eslint is complaining about the whitespace:

  10:44  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  13:49  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  14:56  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  17:53  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  18:45  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  19:23  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence

Below is what fixes it but I shouldn’t have to put all of my JSX on one line right?

<div className={`NameCapture_wrapper`}><p className={`NameCapture__question`}>{`What's your first name?`}</p><NameCaptureNameInput/></div>

[dwilt]

@ljharb You’re correct, it would only be a string.

I wasn’t aware that you are able to have interpolations directly:

const test = `blah`;

<p className={`NameCapture__title`}>
    What's {test} your first name?
</p>

Thanks for your responses!

[ljharb]

I would expect both to warn or not warn the same.