In my Switch Component of react route if i add register route then the image from the route of product screen goes undefined

On my App.js I have following where the routes are:

import React from 'react';
import HomeScreen from './screens/HomeScreen';
import ProductsScreen from './screens/ProductsScreen';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductScreen from './screens/ProductScreen';
import RegisterScreen from './screens/RegisterScreen';

function App() {
  return (
    <Router>
      <Route path='/' component={HomeScreen} exact />
      <Switch>
        <Route path='/products' component={ProductsScreen} />
        <Route path='/:id' component={ProductScreen} />
        <Route path='/register' component={RegisterScreen} />
      </Switch>
    </Router>
  );
}

export default App;

And my product screen from where the undefined error comes from has following:

import React from 'react';
import NavbarSecondary from '../components/navbar/NavbarSecondary';
import allProducts from '../data/allProducts';
import { Link } from 'react-router-dom';
import { Row, Col, Button, Image, Form } from 'react-bootstrap';
import { FiShoppingCart } from 'react-icons/fi';
import Rating from '../components/Rating';
import Footer from '../components/Footer';

const ProductScreen = (props) => {
  const product = allProducts.find(
    (x) => x._id === Number(props.match.params.id)
  );

  return (
    <div className='individual-product-container'>
      <NavbarSecondary />

      <Row
        className='py-4'
        style={{
          marginLeft: '0',
          marginRight: '0',
          padding: '0 0.5rem',
          marginBottom: '4rem',
        }}
      >
        <Col md={6}>
          <Image src={product.image} alt={product.name} fluid />
        </Col>
        <Col md={6} className='individual-product-details'>
          <Col className='flex-row'>
            <Link to='/' className='home-link'>
              Home
            </Link>{' '}
            /{' '}
            <Link to='/products' className='home-link'>
              Products
            </Link>{' '}
            / <p style={{ color: '#00000071' }}>{product.name}</p>
          </Col>
          <Col>
            <h1>{product.name}</h1>
          </Col>
          <Row className='individual-product-price'>
            <Col>${product.price}.00</Col>
            <Col>
              <Rating
                value={product.rating}
                text={`${product.numReviews} reviews`}
              />
            </Col>
          </Row>
          <Col className='individual-product-desc'>
            <p>{product.desc}</p>
          </Col>
          <Row className='individual-product-info'>
            <Col>
              <h4>Stock :</h4>{' '}
              <p>
                {product.countInStock > 0
                  ? 'Product In Stock'
                  : 'Not Available in Stock'}
              </p>{' '}
            </Col>
            <Col>
              {product.countInStock > 0 && (
                <Col>
                  <h4>Quantity :</h4>
                  <Form.Control as='select' className='quantity-form'>
                    {[...Array(product.countInStock).keys()].map((x) => (
                      <option key={x + 1} value={x + 1}>
                        {x + 1}
                      </option>
                    ))}
                  </Form.Control>
                </Col>
              )}
            </Col>
          </Row>
          <Col>
            <Button
              variant='dark'
              disabled={product.countInStock === 0}
              type='button'
              className='btn-addCart'
            >
              <FiShoppingCart /> Add To Cart
            </Button>
          </Col>
        </Col>
      </Row>
      <Footer />
    </div>
  );
};

export default ProductScreen;

The problem is if i dont add any routes in the Switch component there are no errors of undefined but as soon as i add another route such as register then the error starts to pop off from productScreen.js file where the images will be undefined. And also when i remove the productScreen.js route from the Switch component there will not be any error and registerScreen will be rendered. Help me please i can't find the reason behind this problem.