How to add symbols or characters between each react element?

I am designing a reusable component for breadcrumbs and I am using compound components pattern. I need to insert symbols between each breadcrumb name like how we would do for array elements and use join method but I am not sure how to do that with react elements.

import React from "react";

const BreadcrumbsItem = ({ children }) => (
  <p>
    {children}
  </p>
);

const Breadcrumbs = ({ children }) => <FlexContainer>{children}</FlexContainer>;

Breadcrumbs.Item = BreadcrumbsItem;

export default Breadcrumbs;

Input:

<Breadcrumbs>
  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
  <Breadcrumbs.Item>Library</Breadcrumbs.Item>
  <Breadcrumbs.Item>Data</Breadcrumbs.Item>
</Breadcrumbs>

Output: