When sorting components state of children are not updated

I have a parent component on which children need to be sorted by date. I have achieved to sort the component, however these component have a state that remain fixed when sorting button is clicked.

Example :

I have table

first row {name : foo, date : 06/16/2022}second row {name : bar, date :06/12/2022}

after sorting

first row {name : foo, date : 06/12/2022}second row {name : bar, date : 06/16/2022}

name remain fixed, date are sorted.

Parent Component

export default class RonusBows extends React.Component {  constructor(props) {    super(props);    this.state = {      bonus: [],      order: "asc",    };    this.sortFunction = this.sortFunction.bind(this);  }  state = {    bonus: [],    order: "asc",  };  componentDidMount() {    axios      .get(`http://localhost:4000/api/v1/process/creator/gutierad5`)      .then((res) => {        const bonus = res.data;        console.log(17, bonus);        this.setState({ bonus: bonus.processes });      });  }  sortFunction() {    if (this.state.order == "asc") {      this.setState(        this.state.bonus.sort((a, b) => {          const objectA = new Date(a.createdAt);          const objectB = new Date(b.createdAt);          return objectB.getTime() - objectA.getTime();        })      );      this.setState({ order: "desc" });    } else {      this.setState(        this.state.bonus.sort((a, b) => {          const objectA = new Date(a.createdAt);          const objectB = new Date(b.createdAt);          return objectA.getTime() - objectB.getTime();        })      );      this.setState({ order: "asc" });    }  }  render() {    return (<ProcessTable funcionality={this.sortFunction}><Accordion allowToggle allowMultiple>          {this.state.bonus.map((element, index) => (<AccordionItemSlot              key={index}              proccessID={element.id}              title={element.name}              targeruser='gutierad5'              createDate={FormatDateInYYMMDD(element.createdAt)}              status={element.status}              creator={element.creator}              links={element.links}              amount={element.processBonus.amount}              updatedAt={element.updatedAt}              password={element.processBonus.password}              franchise={element.processBonus.franchise}            />          ))}</Accordion></ProcessTable>    );  }}**children component**export type AccordionItemType = InputHTMLAttributes<HTMLInputElement> & {  title: string;  targeruser: string;  createDate: string;  creator?: string;  status: string;  links: Array<any>;  amount: string;  updatedAt: string;  password: string;  franchise: string;  proccessID: string;};export const AccordionItemSlot = (props: AccordionItemType) => {  const WarningString = `Please Click on Accept to see your price`;  const StateContext = React.createContext(props.status);  const [state, setState] = useState(props.status);  const handleChange = () => {    setState("Acknowledged");  };  return (<StateContext.Provider value={state}><AccordionItem><h2><AccordionButton><Box flex='1'><ProcessRow                status={state}                title={props.title}                targeruser={props.targeruser}                createDate={props.createDate}                creator={"daniela"}              /></Box></AccordionButton></h2><AccordionPanel pb={4}><HStack spacing='150px'><Box><List spacing={3}><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Title : {props.title}</ListItem><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Creator : {props.creator}</ListItem><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Created Date : {props.createDate.toString()}</ListItem><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  {state === "Acknowledged" ? (<a                      href={checkIfHTTPSOrNot(props.links[0].URL)}                      target='_blank'                      rel='noopener'>                      Click here to check your prize <ExternalLinkIcon mx={2} /></a>                  ) : (                    WarningString                  )}</ListItem></List></Box><Box><List spacing={3}><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Amount : {props.amount} COP</ListItem><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Password : {props.password}</ListItem><ListItem><ListIcon as={BiCaretRight} color='green.500' />                  Franchise : {props.franchise}</ListItem><ListItem>                  {state === "New" ? (<ButtonComponent                      colorScheme={"teal"}                      variant={"solid"}                      funcionality={() =>                        requestForButton(                          props.proccessID,                          props.targeruser,                          handleChange                        )                      }                      size={"md"}>                      Accept</ButtonComponent>                  ) : ("👈🥳 You are ready to collect your prize!"                  )}</ListItem></List></Box></HStack></AccordionPanel></AccordionItem></StateContext.Provider>  );};export const AccordionWrapper = ({ children }: { children: ReactNode }) => {<Accordion allowMultiple allowToggle>    {children}</Accordion>;};```Thanks in advanced, I'm very new to react and ts : P