Rendering issue when using input form with Boostrap in Typescript

I am currently working on a basic react application using Typescript.The following code is working fine. The code (simplified here) displays a grid of input form. When the use updates the input form with a new price, the Interface priceEntered is updated with the user inputs (this value will be used later on).

import * as React from "react";import { Grid, GridCellProps } from "react-virtualized";interface IAlbum {  id: number,  title: string,  artist: string,  price: number,}interface IAlbumState {  priceEntered: number;}const INITIAL_STATE_ALB: IAlbumState = {  priceEntered: 0,}class App extends React.Component<unknown, IAlbumState> {  public state: IAlbumState = {    ...INITIAL_STATE_ALB,  };  public handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {    this.setState({ priceEntered: Number(e.target.value) });    // item.price = Number(e.target.value);    // console.log("price",item.price);  }  public render = () => {    let albums : IAlbum[] = [];    albums = [        {          id: 0,          title: 'Album One',          artist: 'Alex',          price: 12        },        {          id: 1,          title: 'Album Two',          artist: 'Percy',          price: 10        },        {          id: 2,          title: 'Album Three',          artist: 'Kevin',          price: 120        },        {          id: 3,          title: 'Album Four',          artist: 'John',          price: 0        },        {          id: 4,          title: 'Album Five',          artist: 'Stacy',          price: 1200        }      ]const renderCell = (props: GridCellProps) => {    const index =  props.rowIndex * 6 + props.columnIndex;    return (        index < albums.length ?<div className='product-inner'><div className="w-75 p-3 block-center"><div className="input-group mb-3"><span className="input-group-text">Price </span><input type='text' className="form-control" defaultValue={ albums[index].price ?? 0 } onChange={this.handleChange} /></div></div></div>                : <div />            )};    return (     <Grid              width={window.innerWidth == null ? 1200 : window.innerWidth - 50}              height={window.innerHeight == null ? 1200 : window.innerHeight * 0.90 }              rowCount={(albums.length / 6) + 1}              rowHeight={ (window.innerHeight == null ? 1200 : window.innerHeight * 0.90) * .64}              columnWidth={ (window.innerWidth == null ? 1200 : window.innerWidth - 75) / 6}              cellRenderer={renderCell}              columnCount={6}            />    );  };}export default App;

I made some changes to use Bootstrap instead of the Grid component of react-virtualized. However, I am not able to update the inputs form anymore. Everytime I try to write anything in the input, nothing happens.

import 'bootstrap/dist/css/bootstrap.min.css';import Container from 'react-bootstrap/Container';import Row from 'react-bootstrap/Row';import Col from 'react-bootstrap/Col';interface IAlbum {  id: number,  title: string,  artist: string,  price: number,}interface IAlbumState {  priceEntered: number;}const INITIAL_STATE_ALB: IAlbumState = {  priceEntered: 0,}class App extends React.Component<unknown, IAlbumState> {  public state: IAlbumState = {    ...INITIAL_STATE_ALB,  };  public handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {    this.setState({ priceEntered: Number(e.target.value) });    // item.price = Number(e.target.value);    // console.log("price",item.price);  }  public render = () => {    let albums : IAlbum[] = [];    albums = [        {          id: 0,          title: 'Album One',          artist: 'Alex',          price: 12        },        {          id: 1,          title: 'Album Two',          artist: 'Percy',          price: 10        },        {          id: 2,          title: 'Album Three',          artist: 'Kevin',          price: 120        },        {          id: 3,          title: 'Album Four',          artist: 'John',          price: 0        },        {          id: 4,          title: 'Album Five',          artist: 'Stacy',          price: 1200        }      ]    const GridSystem = ({ colCount, children, md } : {colCount:number, children:any, md:number}) => {      const rowCount = Math.floor(children.length / colCount) + 1      // Index is needed to keep track of the current element that we are one.      let index = 0      // This is the driver function for building the grid system.      const buildGrid = () => {        return (          renderRows()          )      }      // Returns For example, we can have a row with 2 columns inside it.      const renderRows = () => {      const rows = []      for(let row = 0; row < rowCount; row++) {        rows.push(<Row key={row} className='Row row-flex'>            {              renderCols()            }</Row>          )        }                    return rows      }      // Returns an array of columns with the children inside.      const renderCols = () => {      const cols = []      // If you want to add more bootstrap breakpoints you can pass them as props here.      for(let col = 0; col < colCount; col++) {        if(index < children.length) {          cols.push(<Col key={col} className='Col' md={md}>              {children[index]}</Col>          )          index++        }      }              return cols    }      return (<Container className='Container'>          { buildGrid() }</Container>      );    };    const Item = (props: any) => {      const { item } = props      return (<div className='product product-inner content'><div className="w-75 p-3 block-center"><div className="input-group mb-3">            <span className="input-group-text">Price </span>  <input type='text' className="form-control" defaultValue={ item.price ?? 0 } onChange={this.handleChange} /></div></div></div>      )    }    return (     <div><GridSystem colCount={2} md={6}>          { albums.map(item => <Item key={item.id} item={item} />) }</GridSystem></div>    );  };}export default App;```Any idea why? Thanks in advance.