как обновить React компонент во время изменения значения в отдельном от компонента js файле

Всем привет, есть простой React App, что был создан при помощи npx create-react-app my-app

я изменил код в файле файл App.js вот таким образом

import './App.css';

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        вариант 1
        <p>name : {props.name}</p>
        <p>status : {props.status}</p>
        вариант 2
        <p>name: {props.system.storage.name}</p>
        <p>name: {props.system.storage.status}</p>
        <button onClick={props.system.change}>change</button>
      </header>
    </div>
  );
}

export default App;

в папке src я добавил новую папку, что называется system в ней я создал файл с названием state.js что содержит данный код а именно пропсы что идут с файла /system/state.js

class State {

    storage = {
        name:null,
        status:null
    }

    change = () => {
        
        this.storage = {name:'1',status:'2'}
        console.log(this.storage)

    }

}

export var state = new State()

в index.js React приложения я добавил такой код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import {state} from './system/state'

ReactDOM.render(
  <React.StrictMode>
    <App 
        system={state} 
        name={state.storage.name} 
        status={state.storage.status} />
  </React.StrictMode>,
  document.getElementById('root')
);

проблема в том что при нажатии на кнопку новое состояние выводится в консоль но не изменяется значение пропсов компонента App и не происходит перерисовка. Моя цель найти решение как заставить App.js компонент App вывести обновленное имя и статус при нажатии на кнопку. Задача найти решение без использования redux или mobx или других сторонних библиотек