Error 'Cannot find module' while testing react appliation using component react-markdown

Question

I created simple react app contening notes using react-markdown component. Application works but my tests gives error

Cannot find module 'unist-util-visit-parents/do-not-use-color' from 'node_modules/unist-util-visit-parents/lib/index.js'   

Require stack:
  node_modules/unist-util-visit-parents/lib/index.js
  node_modules/unist-util-visit-parents/index.js
  node_modules/unist-util-visit/lib/index.js
  node_modules/unist-util-visit/index.js
  node_modules/mdast-util-to-hast/lib/state.js
  node_modules/mdast-util-to-hast/lib/index.js
  node_modules/mdast-util-to-hast/index.js
  node_modules/remark-rehype/index.js
  node_modules/react-markdown/lib/index.js
  node_modules/react-markdown/index.js
  src/Note.tsx
  src/Note.test.tsx

Note.tsx code is following:

    import { Badge, Button, Col, Row, Stack } from "react-bootstrap";
    import { useNote } from "./NoteWrapper";
    import { Link, useNavigate } from "react-router-dom";
    import ReactMarkdown from "react-markdown";

    type NoteProps = {
        onDelete: (id: string) => void
    }

    export function Note({ onDelete }: NoteProps) {
        const note = useNote()
        const navigate = useNavigate()

        return <>
            <Row className="align-items-center mb-4">
                <Col>
                    <h1>{note.title}</h1>
                    {note.tags.length > 0 && (
                        <Stack gap={1} direction="horizontal" className="justify-context-center flex-wrap">
                            {note.tags.map(tag => (
                                <Badge className="text-truncate" key={tag.id}>
                                    {tag.label}
                                </Badge>
                            ))}
                        </Stack>
                    )}
                </Col>
                <Col sx="auto" >
                    <Stack gap={2} direction="horizontal">
                        <Link to={`/${note.id}/edit`}>
                            <Button variant="primary">Edit</Button>
                        </Link>
                        <Button onClick={() => {
                            onDelete(note.id)
                            navigate('..')
                        }}
                            variant="outline-danger">Delete</Button>
                        <Link to="..">
                            <Button variant="outline-secondary">Back</Button>
                        </Link>
                    </Stack>
                </Col>
            </Row >
            <ReactMarkdown>{note.markdown}</ReactMarkdown>
        </>
    }

Test looks like this:

import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { Note } from './Note';
import { useNote } from './NoteWrapper';

jest.mock('./NoteWrapper', () => ({
  useNote: jest.fn(),
}));

describe('Note Component', () => {
  const mockNote = {
    id: '1',
    title: 'Test Note',
    tags: [
      { id: 'tag1', label: 'Tag1' },
      { id: 'tag2', label: 'Tag2' },
    ],
    markdown: 'This is a test note.',
  };

  const mockOnDelete = jest.fn();

  beforeEach(() => {
    (useNote as jest.Mock).mockReturnValue(mockNote);
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  test('renders note title and tags', () => {
    render(
      <MemoryRouter>
        <Note onDelete={mockOnDelete} />
      </MemoryRouter>
    );

    expect(screen.getByText('Test Note')).toBeInTheDocument();
    expect(screen.getByText('Tag1')).toBeInTheDocument();
    expect(screen.getByText('Tag2')).toBeInTheDocument();
  });

  test('calls onDelete when delete button is clicked', () => {
    render(
      <MemoryRouter>
        <Note onDelete={mockOnDelete} />
      </MemoryRouter>
    );

    // Simulate delete button click
    fireEvent.click(screen.getByText('Delete'));

    // Check if onDelete was called with the correct id
    expect(mockOnDelete).toHaveBeenCalledWith('1');
  });
});