Error: Uncaught [TypeError: Cannot destructure property 'match' of 'props.value' as it is undefined.]

Here it's written header.js code and it's testing with jest framework. While im testing im getting the error property of match of props.value as it is undefined. When i compile , compiler shows this link to solve error but its not getting.

[Link:]https://reactjs.org/link/error-boundaries

Header.js

import React from "react";
import { AppBar, Typography, Toolbar, Tabs, Tab, Button } from "@mui/material";
import {IconButton} from "@mui/material";
import { withStyles } from "@material-ui/core/styles";
import {Logout} from '@mui/icons-material'
import "./Header.css";
import Profile from '../Profile/Profile';
import Wallet from '../Wallet/Wallet';
import Market from "../Market/Market";
import Portfolio from "../Portfolio/Portfolio";
import Trade from "../Trade/Trade";


const Header = (props) => {
    const { match, history } = props.value;
    const { params } = match;
    const { page } = params;
  
    console.log(page);
  
    const IndexToTableName = {
      0:"Profile",
      1:"Walllet",
      2:"Trade",
      3:"Market",
      4:"Portfolio"
    };
  
    const TabNametoIndex = {
      Profile: 0,
      Wallet: 1,
      Trade:2,
      Market:3,
      Portfolio:4
    };
  
  
    let[value,setValue]=React.useState(TabNametoIndex[page]);

    const handleChange=(event,newValue)=>{
        history.push(`/UserHome/${IndexToTableName[newValue]}`);
        setValue(newValue);
    };
  const WhiteTextTypography = withStyles({
    root: {
      color: "#25316D"
    }
  })(Typography);
    return (
        <div id="Header" style={{height:"100vh"}} data-testid="header">
            <AppBar style={{ background: "#7FBCD2", marginleft: "auto",  fontFamily:"sans-serif" }} position="sticky">
                <Toolbar>
                    <WhiteTextTypography variant="h5" id="Typo">TradeHut</WhiteTextTypography>
                    <Tabs  id="Tabs" textColor="white" indicatorColor="primary" value={value} onChange={handleChange}>
                        <Tab label="Profile" className="tab"/>
                        <Tab label="Wallet" className="tab"/>
                        <Tab label="Trade" className="tab"/>
                        <Tab label="Market" className="tab"/>
                        <Tab label="Portfolio" className="tab"/>
                    </Tabs>
                    <div id="IconButton">
                    <IconButton color="primary" aria-label="add an alarm" size="large" id="logout">
                        <Logout/>
                    </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
            {value===0 && <Profile/>}
            {value===1 && <Wallet/>}
            {value===2 && <Trade/>}
            {value===3 && <Market/>}
            {value===4 && <Portfolio/>}
        </div>
    )
}
export default Header;

Header.test.js

import React from 'react';
import Header from "./Header";
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom'
describe("Test the Header Component", () => {
    test("To Check whether Header Div is present or not", () => {
      render(<Header />);
      const buttonList = screen.getByTestId("header");
      expect(buttonList).toBeTruthy();
    });
});