Content not rendering after click to open

Question

import { InputBaseClassKey } from '@material-ui/core';

export interface IProduct {
  id: number;
  name: string;
  type: string;
  image: string;
  longDescription: string;
  specs?: ISpecs;
}
export interface ISpecs {
  actuationForce: string;
  actuationPoint: string;
  bottomOut: string;
  bottomOutTravel: string;
  price: string;
}
export class Collection {
  items: IProduct[] = [
    {
      id: 1,
      name: 'Holy Panda',
      type: 'Tactile',
      image:
        'https://ih0.redbubble.net/image.618638614.1485/raf,750x1000,075,t,fafafa:ca443f4786.jpg',
      longDescription: '...',
      specs: {
        actuationForce: '44',
        actuationPoint: '2.4',
        bottomOut: '62',
        bottomOutTravel: '3.8',
        price: '1.60',
      },
    },
    {
      id: 2,
      name: 'Ball',
      type: 'Tactile',
      image:
        'https://www.dhresource.com/0x0s/f2-albu-g10-M01-37-44-rBVaVlwXTHGAcrxyAAG7z5SOYSU760.jpg/9-5-oversize-giant-tennis-ball-for-children.jpg',
      longDescription: '...',
      specs: {
        actuationForce: '44',
        actuationPoint: '2.4',
        bottomOut: '62',
        bottomOutTravel: '3.8',
        price: '5.60',
      },
    },
    {
      id: 3,
      name: 'Ring',
      type: 'Tactile',
      image:
        'https://cbu01.alicdn.com/img/ibank/2018/917/621/10207126719_1492657371.jpg',
      longDescription: '...',
      specs: {
        actuationForce: '44',
        actuationPoint: '2.4',
        bottomOut: '62',
        bottomOutTravel: '3.8',
        price: '11.60',
      },
    },
  ];
  handlerItemClicked = (_id: number) => {};
}

I am having trouble getting a detail view to render when clicking on an item in a product list. When I click on the specific product on the list it should open a div with a some product details but a rendered component is empty. Actually the button to close the view renders but all other content is missing (description, image, etc).

import { AppBar, Dialog, IconButton, Slide, Toolbar } from '@material-ui/core';
import { TransitionProps } from '@material-ui/core/transitions/transition';
import { Close } from '@material-ui/icons';
import React from 'react';
import { IProduct } from './Products';

export interface IDetailsProps {
  open: boolean;
  product: IProduct | null;
  handleClose(): void;
}

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & { children?: React.ReactElement },
  ref: React.Ref<unknown>,
) {
  return <Slide direction='left' ref={ref} {...props} />;
});
export class DetailView extends React.Component<IDetailsProps> {
  constructor(props: IDetailsProps) {
    super(props);
    this.handleClose = this.handleClose.bind(this);
  }
  render() {
    return (
      <div className='full-screen-details-dialogue'>
        <Dialog
          fullScreen
          open={this.props.open}
          TransitionComponent={Transition}>
          <AppBar>
            <Toolbar>
              <IconButton
                edge='start'
                color='inherit'
                onClick={this.handleClose}
                aria-label='close'>
                <Close></Close>
              </IconButton>
            </Toolbar>
          </AppBar>
        </Dialog>
      </div>
    );
  }
  handleClose() {
    console.log(`Details:handleClose()`);
    this.props.handleClose();
  }
}

import React from 'react';
import { CollectionView } from './CollectionView';
import './App.css';
import { MyButton } from './MyButton';
import { Collection, IProduct } from './Products';
import { DetailView } from './DetailView';
export interface IAppProps {}
export interface IAppState {
  showDetails: boolean;
  product: IProduct | null;
}

const collectionInstance = new Collection();
class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps) {
    super(props);
    this.showDetailView = this.showDetailView.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.state = { showDetails: false, product: null };
  }
  render() {
    return (
      <div>
        <CollectionView
          {...collectionInstance}
          handlerItemClicked={this.showDetailView}></CollectionView>
        <DetailView
          open={this.state.showDetails}
          product={this.state.product}
          handleClose={this.handleClose}></DetailView>
      </div>
    );
  }
  showDetailView(id: number) {
    let fundItem = collectionInstance.items.find((item: IProduct) => {
      return item.id === id;
    });
    if (fundItem) {
      this.setState({
        showDetails: true,
        product: fundItem,
      });
    }
  }
  handleClose() {
    console.log(`App.handleClick() called`);
    this.setState({
      showDetails: false,
      product: null,
    });
  }
}

export default App;