React- komponenty wyższego rzędu przekazywanie propsów do wewnętrznego i zewnetrznego

Czołem,
Przeczytałam to i owo o komponentach wyższego rzędu i o ile pewne rzeczy są dla mnie zrozumiałe to pewne jednak nie.
Chodzi mi konkretnie o przekazywanie props do komponentu wewnętrznego i zewnętrznego.

import React from 'react';
import PropTypes from 'prop-types';
export class Btn extends React.Component {
  render() {
    return <button className={`btn button ${this.props.class}`}>{this.props.text}</button>
  }
  }
  
  Btn.propTypes = {
    class: PropTypes.string,
    text: PropTypes.string.isRequired
  }

Mam taki oto guzik. A chodzi mi o jedno (oczywiście to bardzo rozwijalny przykład). Chciałabym zdefiniować HOC, który ten guzik będzie opatulał divem o pożądanych parametrach (przekazywanych przez props. Czyli w wywołaniu jedne propsy miałyby iść do guzika a jedne do diva-wrappera.
Div-wrapper w tej chwili wygląda tak ( to jedna z możliwości -ale wydawało mi się ze tak będzie bardziej elegancko 9tzn przez rozszerzenie klasy buttona. Próbowałam też ze zwykłym obramowaniem divem.

import React from 'react';
import {Btn} from'./button'
export class buttonEnhancer extends Btn (Component){
    render(){
  return  (
   <div className ={this.props.style}>
      super.render()
      </div>
    
  );
};
}

Chodzi o to, że to nie bardzo działa. A już zupełnie chodzi o to, że nie wiem jak to wywołać w pliku zewnętrznym do obu.