Использование одного компонента несколько раз

import React, {Component} from 'react';
import './App.css';
import up_arrow from "./images/up_arrow.png";
import down_arrow from "./images/down_arrow.png";
import up_arrow_active from "./images/up_arrow_active.png";
import down_arrow_active from "./images/down _arrow_active.png";
 
class Sort extends Component {
 
  render() {
    return <div>
  
      <div>
        <img
          src={this.props.arrows.direction === 'Up' ? up_arrow_active : up_arrow}
          onClick={this.props.sortFunc.bind(null, this.props.type, 'Up')}
        />
        <img
          src={this.props.arrows.direction === 'Down' ? down_arrow_active : down_arrow}
          onClick={this.props.sortFunc.bind(null, this.props.type, 'Down')}/>
      </div>
         </div>
  }
}
 
export default Sort;

 <table>
            <thead>
            <tr>
              <th>Task<Sort arrows={this.state.sort} sortFunc={this.directionFunction} typeSort='text' /></th>
              <th>Date<Sort arrows={this.state.sort} sortFunc={this.directionFunction} typeSort='date' /></th>
              <th>Done</th>
            </tr>
            </thead>
            <tbody>
            {this.filterAndSort(this.state.casesInfo, this.state.textFilter, this.state.filterDate, this.state.sort)}
            </tbody>
          </table>

 typeSort='date'
typeSort='name'