Package path ./addon/hint/show-hint is not exported from package in codemirror

Question

import React, { useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/addon/hint/show-hint';
const languageModes = [
  { name: 'javascript', json: true },
  { name: 'python', version: 3 },
  { name: 'ruby' },
];

const Ide = () => {
  const [code, setCode] = useState('//:code');
  const [selectedLanguage, setSelectedLanguage] = useState('javascript');

  const handleLanguageChange = (event) => {
    setSelectedLanguage(event.target.value);
  };

  const updateCode = (newCode) => {
    setCode(newCode);
  };

  return (
    <div>
      <div>
        <label htmlFor="language">Select Language:</label>
        <select id="language" value={selectedLanguage} onChange={handleLanguageChange}>
          {languageModes.map((mode) => (
            <option key={mode.name} value={mode.name}>
              {mode.name}
            </option>
          ))}
        </select>
      </div>
      <CodeMirror
        onChange={() => updateCode(code)}
        value={code}
        options={{
          theme: 'monokai',
          keyMap: 'sublime',
          mode: selectedLanguage, 
          lineNumbers: true,
          extraKeys: {
            'Ctrl-Space': 'autocomplete',
          },
        }}
      />
    </div>
  );
};

export default Ide;

This is Ide component in react I have install codemirror , but whenever I try import codemirror/addon/hint/show-hint or any other code mirror module I am getting this error Package path ./addon/hint/show-hint is not exported from package error image

node_modules