Как правильно передать компонент в HOC (React)?

Question

Kryptonit @Kryptonit

Как правильно передать компонент в HOC (React)?

Здравствуйте, столкнулся с проблемой, при передаче компонента, который возвращает фрагмент из нескольких элементов,
Fields, посмотрел документацию, возможно что-то упустил, т.к. приходит ошибка.
у меня есть компонент App, который рендерит роуты, в нём есть роут, где element = {}

const App = () => {
    const [visibleRandom, setVisibleRandom] = useState(true)

    return (
        
        <Router >
            <div className='app'> 
                <Container>
                    <Header />
                </Container>
                <Container>
                    <Row>
                        <Col lg={{size: 5, offset: 0}}>
                            {visibleRandom ? <RandomChar/> : null}
                            <Button color='light' outline onClick={()=>{setVisibleRandom(prev => !prev)}}>Toggle above block</Button>
                        </Col>
                    </Row>
                    
                    <Routes>
                        <Route path='/' element={<h1 className='bh-light color-black'>Welcome to Main Page</h1>}/>
                        <Route path="characters" element={<CharacterPage/>} />
                        <Route path="houses" element={<HomePage/>} />
                        <Route path="books" element={<BookPage/>} />
                        <Route path='books/:id' element={<BookIdWithData/>} /> // Здесь 
                        <Route path='houses/:id' element={<HousesId/>} />
                        <Route path='characters/:id' element={<CharactersId/>} />
                        
                    </Routes>
                </Container>
                </div>
        </Router>
        
    );
};

Это должен был быть похожий на 2 компонента чуть выше элемент, но я хочу последовать DRY и обернуть все эти 3 компонента

<Route path="houses" element={<HomePage/>} />
<Route path="books" element={<BookPage/>} />
<Route path='books/:id' element={<BookIdWithData/>} />

в HOC, пока что, как видно из названия, я обернул только он оборачивается здесь:

const requestFunc = "getAllBooks"
export const BookIdWithData = sameIdPattern(BookId, requestFunc)

function BookId(){
    return (
        <>
            <Field  label={'Publisher'} field={'publisher'} />
            <Field  label={'Pages'} field={'numberOfPages'} />
        </>
    )
}

а вот сама обёртка:

export function sameIdPattern(Page, requestFunc){
    return function SameIdPattern() {
        const [ itemDetails, setItemDetails ] = useState()
        const getElems = new getElementsClass()
        const {id} = useParams()

        getElems[requestFunc]()
            .then(data => {setItemDetails(data[id])})
        console.log(Page().children)
        return (
            <ItemDetails itemDetState={ itemDetails }>
                <Page /> //Здесь 
                
                    {/* <Field  label={'Publisher'} field={'publisher'} />
                    <Field  label={'Pages'} field={'numberOfPages'} /> */}
                
            </ItemDetails>
        )
    }
}

В крайнем кусочке кода есть сетевой запрос, собственно из-за него я и хочу воспользоваться HOC,
если раскомментить код ниже ( : {Page} и {Page()}, подскажите где ошибся (возможно это как-то связано с React.Fragment)