Estoy tratando de crear una aplicación de reacción en la que pueda diseñar un botón usando JavaScript cambiando variables como ancho, alto, etc., pero recibo este error cuando intento pasar los valores de "ancho" y "alto" de mi index.js a mi App.js (donde exporto mi Botón)

Recibo el error: "No se puede acceder a 'sizeWidth' antes de la inicialización" cuando vuelvo a cargar mi aplicación React. (línea 13)

Aplicación.js:

 import {sizeWidth, sizeHeight} from './index'; import {Component} from "react"; // units are in px, colors are in HEX, rotation is in degrees //element class Page extends Component { render() { return ( <Button width={sizeWidth} height={sizeHeight}/> // error is here ) } } class Button extends Component { render() { return ( <button className="element" style={{ width: sizeWidth, height: sizeHeight }}>BUTTON</button> ); } } export default Page;

índice.js:

 import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); const sizeWidth = 238; const sizeHeight = 76; export {sizeWidth, sizeHeight}

¡Apreciaría mucho si alguien pudiera ayudarme a resolver este problema! Soy muy nuevo en React.