Webstorm React JSX inline css style auto suggestion breaks

[znshje]

• three version: NOT INSTALLED
• @react-three/fiber version: NOT INSTALLED
• @react-three/drei version: 9.105.4
• node version: v21.7.3
• npm (or yarn) version: yarn 1.22.22
• OS: Arch Linux 6.6.28-1-lts
• WebStorm version: 2024.1 Build #WS-241.14494.235, built on March 27, 2024

Problem description:

When @react-three/drei is not installed, the auto suggestion of React JSX inline css works normally as:

But when I install the library by yarn add @react-three/drei, and webstorm auto suggestion for React JSX inline css breaks:

Relevant code:

The issue can be reproduced from a minimal setup by create-react-app, and run yarn add @react-three/drei.

// App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App" style={{wi}}> {/* <- type any css style name, and press CTRL + Space for auto suggestions */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Suggested solution:

I'm afraid no suggested solutions can be provided currently.