Nesting React components in a variable

I've attached the relevant code in the bottom

Hey guys, I've created a file with multiple button components, and a function component that should render 2 buttons according to the props it receives (for example, render & when in homepage, and render & when in a different page).

The concept being it is to create a single component that will always be rendered in my Layout HOC and will know which buttons to display based on the page url.

The way I tried realizing that buttons function, is by creating a variable that will get the two proper buttons assigned to in a switch case based on the current url, and return that variable.

I try assigning a JSX element made of a React.Fragment that has the 2 relevant button components inside it, but I get an error saying my needs to have a corresponding closing tag..?

I'd really appreciate an explanation as for why it happens, and what would be a proper approach for my use case.

Thanks a lot...!!!

My layout HOC:

 const Layout = props => (
  <Grid fluid>
    <div style={layoutStyles}>
      {props.children}
      <FloatingButtons page={props.page.pathname} />
    </div>
    <div style={layoutStyles}>
      { showFooter(props.page.pathname, pagesToShow) && <Footer /> }
    </div>
  </Grid>

This is my FloatingButtons component:

const FloatingButtons = (props) => {
  const { page } = props;
  let buttons;
  let simplifiedUrl = page.slice(page.lastIndexOf('/') + 1);

  switch (simplifiedUrl) {
    case 'home':
      buttons =
          <React.Fragment> ***// Here is where I get the error***
             <MenuFloatingBtn {...props} />
             <ShareFloatingBtn {...props} />
          <React.Fragment/>
      break;
    case 'otherPage':
      buttons = 'etc'
      break;
    default:
      break;
  }
  return buttons;
};