Uncaught Invariant Violation: React.Children.only expected to receive a single React element child error in React Bootstrap?

Question

I'm building a little component with React Bootstrap but I'm stuck with this error

Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.

The above error occurred in the <Position> component:
in BundledSchedulesModal (created by ActiveSchedulesTable)
(...)

This is the component where I trigger this overlay. It's a React-Table component, but don't think the third-party library affects this error in any way.

import { BundledSchedulesModal } from './BundledSchedulesModal';

export const ActiveSchedulesTable = ({
}) => {
  const [showBundledModal, setShowBundledModal] = React.useState({
    id: undefined,
    show: false,
  });
  const target = React.useRef(null);

  const columns = React.useMemo(
    () => [
      {
        Header: t('Type'),
        (...)
      },
      {
        Header: t('Description'),
        (...)
      },
      {
        Header: t('Next Run'),
        (...)
      },
      {
        Header: '',
        id: 'controls',
        align: 'right',
        width: 40,
        Cell: ({ row }) => (
          <>
              <div className="full-width flex--align-center flex--end">
                **<button
                      className="btn--plain"
                      onClick={() => {
                        setShowBundledModal({
                          id: row.original.id,
                          show: !showBundledModal.show,
                        });
                      }}
                      ref={target}
                    >
                      <i className="fa fa-info-circle table-tooltip" />
                    </button>**

                    <button
                       onClick={() => setDeleteValueRow(row.original)}
                       className="custom-button flex--centered flex--align-center"
                     >
                        <CloseIcon width="15px" height="15px" />
                    </button>
              </div>
          </>
        ),
      },
    ],
    [],
  );

  const schedules = React.useMemo(() => data || [], [data]);

  return (
    <>
      <PaginatedTable
        (...)
      />
      **{showBundledModal.show ? (
        <BundledSchedulesModal
          type="schedule"
          id={showBundledModal.id}
          show={showBundledModal.show}
          target={target.current}
        />
      ) : null}**
    </>
  );
};

And this is the overlay I'm trying to open when clicking on the button and when the error occurs.

import * as React from 'react';
import { Overlay } from 'react-bootstrap';

export const BundledSchedulesModal = ({ show, type, id, target }) => {

  return (
    <Overlay target={target} show={show} placement="left">
      schedules
    </Overlay>
  );
};

Can't understand where the component receives more than one child, honestly, and I'm stuck with that

Thanks a lot

Answer 1

Overlay expects its children to be enclosed in a parent element so -

 <Overlay target={target} show={show} placement="left">
         schedules
    </Overlay>

should be changed to

<Overlay target={target} show={show} placement="left">
      <span>schedules</span>
</Overlay>