Recently I have been creating an app to display various data from a database, currently I am attempting to create a button to allow for a comparison between two date ranges, my solution is to allow the user to click compare and then add an additional copy of the app component on the screen. In my app.js file I have done similar things using useStates in which I change data and the component rerenders but here it seems to do nothing when adding to the multiview array. Setting the array ahead does render the copy of the component however the button press does not, I assume that this is due to it not rerendering when the array is updated due to using ReactDom.render rather than returning a component as I've previously done in App.js and it's components.

Code for index.js

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

var multiView = [];
var i = 0;
var handleDateCompare = (e) => {
  i++
  multiView.push(<App key={"app"+i} dateCompareClick = {handleDateCompare}/>)
  console.log(multiView);
}

ReactDOM.render(
  <React.StrictMode>
    <MenuBar />
    <App dateCompareClick = {handleDateCompare}/>
    {multiView}
  </React.StrictMode>,
  document.getElementById('root')
);