React useState passed as props is not changing in child components

I have this component, it has an array of objects called recogidas, but, i’m putting it within a useState, and, i’m passing it to other components as you can see.

interface ITableProps {
    showDrawer: boolean;
}

const SinAsignarTable: FC<ITableProps> = ({ showDrawer }) => {
    const animationStart = useSelector(getSinAsignarSlide);
    const containerRef = useRef(null);

    const [recogidas, setRecogidas] = useState<any[]>(recogidasSinAsignarArray);

    return (
        <MainContent open={showDrawer} ref={containerRef}>
            {/* Title */}

            <SinAsignarTitle animationStart={animationStart} />

            <TableContainer component={Paper} sx={{ maxHeight: 624, borderRadius: '5px' }}>
                <Table stickyHeader aria-label="customized table" sx={{ minWidth: 800 }}>
                    {/* Header */}
                    <SinAsignarHead recogidas={recogidas} setRecogidas={setRecogidas} />

                    {/* Hero content */}
                    <SinAsignarContent recogidas={recogidas} />
                </Table>
            </TableContainer>
       
        </MainContent>
    );
};

export default SinAsignarTable;

The problem, is that, in SinAsignarHead component, is where i’m updating the useState, but, it only shows the updates after re-rendering the component, let me show you.

SinAsignarHead component

const SinAsignarHead: FC<{ recogidas: any[]; setRecogidas: Dispatch<SetStateAction<any[]>> }> = ({
    recogidas,
    setRecogidas,
}) => {
    const [descendent, setDescendent] = useState<boolean>(true);

    const handleDataOrganization = (): void => {
        setDescendent(!descendent);
        setRecogidas(recogidas.sort((a: any, b: any) => a.recogida - b.recogida));
        // else setRecogidas(recogidas.sort((a: any, b: any) => b.recogida - a.recogida));
    };

    return (
        <>
            {/* Table's header */}
            <TableHead>
                <TableRow>
                    <TableCell padding="checkbox" sx={{ padding: '0px 0px 0px 4px' }}>
                        <Checkbox color="primary" indeterminate={false} checked={false} />
                    </TableCell>

                    <TableCell align="left" sx={{ padding: '7.5px 16px 7.5px 16px' }}>
                        <div
                            style={{
                                width: '100%',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'space-between',
                            }}
                        >
                            Recogida
                            <IconButton onClick={handleDataOrganization} sx={{ marginLeft: '5px', padding: '6px' }}>
                                {descendent ? (
                                    <ArrowDownward sx={{ width: 22, height: 22 }} />
                                ) : (
                                    <ArrowUpward sx={{ width: 22, height: 22 }} />
                                )}
                            </IconButton>
                        </div>
                    </TableCell>

                    <TableCell sx={{ minWidth: '255px', padding: '7.5px 16px 7.5px 6.5px' }} align="left">
                        Dirección
                    </TableCell>

                    <TableCell sx={{ minWidth: '115px', padding: '7.5px 16px 7.5px 16px' }} align="left">
                        Ciudad
                    </TableCell>

                    <TableCell sx={{ minWidth: '150px', padding: '7.5px 16px 7.5px 16px' }} align="left">
                        Tipo cuenta
                    </TableCell>

                    <TableCell sx={{ minWidth: '105px', padding: '7.5px 16px 7.5px 16px' }} align="left">
                        Producto
                    </TableCell>

                    <TableCell sx={{ minWidth: '165px', padding: '7.5px 16px 7.5px 16px' }} align="left">
                        Contacto
                    </TableCell>
                </TableRow>
            </TableHead>
        </>
    );
};

export default SinAsignarHead;

When handleDataOrganization function executes, it should update recogidas’s state, but it doesn’t.

This is SinAsignarContent

const SinAsignarContent: FC<{ recogidas: any[] }> = ({ recogidas }) => {
    return (
        <TableBody>
            {recogidas.map(({ recogida, direccion, ciudad, tipoDeCuenta, producto, contacto }, index) => {
                // const sinAsignarData = {
                //     recogida,
                //     direccion,
                //     ciudad,
                //     tipoDeCuenta,
                //     producto,
                //     contacto,
                // };
                return (
                    <TableRow key={index}>
                        <TableCell padding="checkbox" sx={{ padding: '0px 0px 0px 4px' }}>
                            <Checkbox color="primary" checked={true} />
                        </TableCell>

                        <TableCell
                            sx={{
                                color: '#086BB5',
                                fontWeight: 500,
                                cursor: 'pointer',
                                padding: '5px 20px 5px 0px',
                            }}
                            align="center"
                        >
                            {recogida}
                        </TableCell>

                        <TableCell
                            sx={{
                                color: '#00000099',
                                cursor: 'pointer',
                                padding: '5px 16px 5px 6.5px',
                            }}
                            align="left"
                        >
                            {direccion}
                        </TableCell>

                        <TableCell
                            sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
                            align="left"
                        >
                            {ciudad}
                        </TableCell>

                        <TableCell
                            sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
                            align="left"
                        >
                            {tipoDeCuenta}
                        </TableCell>

                        <TableCell
                            sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
                            align="left"
                        >
                            {producto}
                        </TableCell>

                        <TableCell
                            sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
                            align="left"
                        >
                            {contacto}
                        </TableCell>
                    </TableRow>
                );
            })}
        </TableBody>
    );
};

export default SinAsignarContent;

I’ve used useState in other ocations, where, i pass data as props, and update it whit no problem, why is not working this time ? why am i being forced to re-render component ?