React, Props "Cannot read property "props" undefined" hatası

Merhaba,
React ile Props kullanarak bir componentten diğer componente değişken aktarmak istiyorum ama her şeyi doğru yaptığıma emin olduğum halde "Cannot read property "props" undefined" hatası yiyorum neden olabilir?

[CODE lang="javascript" title="Products.js (Sepete Ekle Düğmeleri ve Ürünler)"]import React, { Component } from "react"
import {Table, Button} from "reactstrap"

export default class ProductList extends Component {

render() {
return (
<div>
<h3>{this.props.currentCategory}</h3>
<Table>
<thead>
<tr>
<th>#</th>
<th>Ürün Adı</th>
<th>Ürün Miktarı</th>
<th>Fiyat</th>
<th>Stok</th>
<th></th>
</tr>
</thead>
<tbody>
{this.props.products.map(product => (
<tr key={product.id} >
<th scope="row">{product.id}</th>
<td>{product.productName}</td>
<td>{product.quantityPerUnit}</td>
<td>{product.unitPrice}</td>
<td>{product.unitsInStock}</td>
<td><Button onClick={()=>this.props.addToCart(product)} color="info">Sepete Ekle</Button></td>
</tr>
))}
<tr>

</tr>
</tbody>
</Table>
</div>
)
}
}[/CODE]

[CODE lang="javascript" title="app.js (Props aktarımı)"]import React, { Component } from "react";
import Navi from "./Navi";
import ProductList from "./ProductList";
import CategoryList from "./CategoryList";
import { Container, Row, Col } from "reactstrap";

export default class App extends Component {
state = { currentCategory: "", products: [],cart: [] };

componentDidMount() {
this.getProducts();
}

changeCategory = (category) => {
this.setState({ currentCategory: category.categoryName });
this.getProducts(category.id);
};

getProducts = categoryId => {
let url = "http://localhost:3000/products";
if (categoryId) {
url += "?categoryId=" + categoryId;
}
fetch(url)
.then((response) => response.json())
.then((data) => this.setState({ products: data }));
};

addToCart=(product)=>{
let newCart = this.state.cart;
var addedItem = newCart.find(c=>c.product.id === product.id);
if (addedItem){
addedItem.quantity+=1;
}else{
newCart.push({productroduct,quantity:1});
}

this.setState({cart:newCart});

}

render() {
let productInfo = { title: "Product List", baskaBisey: "bisey" };
let categoryInfo = { title: "Category List" };
return (
<div className="App">
<Container>
<Navi cart={this.state.cart} />
<Row>
<Col xs="3">
<CategoryList
currentCategory={this.state.currentCategory}
changeCategory={this.changeCategory}
info={categoryInfo}
/>
</Col>
<Col xs="9">
<ProductList
products={this.state.products}
currentCategory={this.state.currentCategory}
info={productInfo}
addToCart = {this.addToCart}
/>
</Col>
</Row>
</Container>
</div>
);
}
}
[/CODE]

[CODE lang="javascript" title="Navi.js (Options sekmesinde ben kaç kere productListte "Sepete Ekle" düğmesine basarsam basma sayımın eklenmesi lazım)"]
import React, { useState } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';

const Navi = (_props) => {
let [isOpen, setIsOpen] = useState(false);

let toggle = () => setIsOpen(!isOpen);



return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand href="/">NorthWind App</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options - {this.props.cart.length}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
);
}

export default Navi;[/CODE]