This is the table I have right now. The problem is that when I want to sort for example the column "Driver" all other columns get sorted as well.

I want to be able to sort them one at a time and only when clicked.

import './Table.css'
import { useMemo } from 'react'
import { COLUMNS } from './Columns'
import { useTable, useSortBy, useFlexLayout  } from 'react-table'
import Data from './Data'


const Table = () => {

    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => Data, [])
    const initialState = useMemo(() => Data, [])



    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        toggleSortBy,
    } = useTable(
        {
            columns,
            data,
            initialState
        },
        useSortBy,
        useFlexLayout
    )

    return (
        <div className='table-container'>
            <table {...getTableProps() }>
                <thead>
                    {
                        headerGroups.map((headerGroups) => (

                            <tr {...headerGroups.getHeaderGroupProps()}>
                                {headerGroups.headers.map( (column) => (
                                    <th   
                             {...column.getHeaderProps(column.getSortByToggleProps())} >
                                        {column.render('Header')}</th>
                                ))}
                            </tr>

                        ))
                    }

                </thead>
                ```