Conditionally rendering the Header and Footer components in react-Router v6

HOC.js

// HOC component
import {Header, Footer} from '/path/to/Components';

export default ({header , footer, component: Component}) => {
  return (
  <div>
     {header ? <Header /> : null} // check for true or false prop for rendering header
     <Component /> // render component passed.
     {footer ? <Footer /> : null} // check for true or false prop for rendering footer
  </div>
  )
}

index.js

// index.js 
import React from 'react';
import { Switch, BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import routes from './routes';
import Header from '../Components/Header';
import Footer from '../Components/Footer';
import './styles.scss';

const Routes = (props) => {

  return (
    <Router>
      <div>
        <Switch>
          {routes.map((route, index) => <HOC key={`${Math.random()}${index}`} {...route} />)}
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  );
};

export default Routes;

routes.js

// Routes file
import {Compnent1, Component2, Login, Home, ...etc} from '/path/to/Components'

export default [
 {
    path: '/component1',
    exact: true,
    component: Component1,
    footer: true, // prop to enable hiding and showing footer component
    header: true // prop to enable hiding and showing header component
  },
  {
    path: '/component2',
    exact: true,
    component: Component2,
    footer: true, // prop to enable hiding and showing footer component
    header: true // prop to enable hiding and showing header component
  },
  {
    path: '/login',
    exact: true,
    component: Login,
    footer: false, // prop to enable hiding and showing footer component
    header: false // prop to enable hiding and showing header component
  },
  {
    path: '/',
    exact: true,
    component: Home,
    footer: false, // prop to enable hiding and showing footer component
    header: false // prop to enable hiding and showing header component
  }
]