how to stop table header from repeating?

I have no error but I have a problem with my table header, it keeps repeating in every data it fetch.

this is the picture of the of the table;

and here is my code for my fetch method, this is the main page

import { Fragment, useEffect, useState, useContext } from 'react';
import OrderCards from '../components/OrderCards'
import React from 'react';
import UserContext from '../UserContext'
import Swal from 'sweetalert2';
import {Container, Row, Col, Form } from 'react-bootstrap'
import { useParams, useNavigate, Link } from 'react-router-dom';
import Table from 'react-bootstrap/Table'

enter code here
export default function MyOrders() {

const { user, setUser } = useContext(UserContext);

const [orders, setOrders] = useState([]);

const fetchData = () => {
    fetch('http://localhost:4000/users/myOrders', {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem('token')}`
        }
    })
    .then(res => res.json())
    .then(data => {
        console.log(data);

        setOrders(data.usersOrder.map(order => {
            
            return (
                <OrderCards key={order._id} orderProp={order} />
            );
        }))
    })
}


useEffect(() => {
    fetchData()
}, []);

return(
    <Fragment>
        {orders}
    </Fragment>
)
}

and here is my code for the table, this is where I create my table for the data that I fetch

import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Card, Button } from 'react-bootstrap'
import React from 'react';
import { Link } from 'react-router-dom'
import {Container, Row, Col, Form } from 'react-bootstrap'
import Table from 'react-bootstrap/Table'

export default function OrderCard({orderProp}) {

const {_id, name, productId, purchasedOn} = orderProp;

return (
        <Container>
           <Table striped bordered hover variant="dark">
              <thead>
                <tr>
                </tr>
              </thead>
              <thead>
                <tr>
                  <th className="w-25">Purchased Date</th>
                  <th className="w-25">Order ID</th>
                  <th className="w-25">Product ID</th>
                  <th className="w-25">Action</th>
                </tr>
              </thead>
            </Table>
            <Table>
              <tbody className="justify-content-center">
                <tr>
                  <td className="w-25">{purchasedOn}</td>
                  <td className="w-25">{_id}</td>
                  <td className="w-25">{productId}</td>
                  <td><Link className="btn btn-danger" to={`/products/${_id}`}>View 
Details</Link></td>
                </tr>
              </tbody>
            </Table>
        </Container> 
)   
}

OrderCard.propTypes = {
productProp: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    productId: PropTypes.string.isRequired,
    PurchasedOn: PropTypes.string.isRequired
})
}

Help me solve my problem, thank you