I am trying to add custom functionality to some of the bootstrap components. I am trying to create HOC.

I create a component

import { forwardRef } from 'react';
import { ListGroup as BsListGroup, ListGroupProps } from 'react-bootstrap';
            
const ListGroup = forwardRef((props: ListGroupProps, ref) => {
  const { children } = props;
  return (
    <BsListGroup ref={ref} {...props}>
      {children}
    </BsListGroup>
  );
});

export default ListGroup;

Importing

import ListGroup from '../../bootstrap/listGroup/ListGroup';

However, I am getting error when trying to use it:

SessionList.componet.tsx:39 Warning: React.jsx: type is invalid —
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it’s defined in, or you might have mixed
up default and named imports.

What am I doing wrong?