useState and useRef don't work together properly - reactjs

Question

I'm in a case where I need to combine useState and useRef in a way, but I'm having a problem when it comes to deleting, so for example when I call the delete the update function firstly I update the state and then update the user jeff, but the deleted item firstly is deleted from the iterated and showing list, then again pop-ups, but kinda messed, the content is not the same.
Here is how I manage delete:
const Delete = (props: any, index: number, editorsRef: any): void => {
const newEmployment = cloneDeep(props.resume.employmentHistory.positions)
newEmployment.splice(index, 1)
props.setResume(
{
...props.resume, employmentHistory:
{
...props.resume.employmentHistory,
positions: newEmployment
}
}
)
const refs = {} as any;
newEmployment.map(
(position: any, index: number) =>
refs[index] = position.description
)
editorsRef.current = refs;
console.log(newEmployment, editorsRef.current)
}
And here is the iteration of the editor that has the value of useReff, and the interaction and everything related to how I change the state, something Is missing but I don't know, I really don't.
//#ts-nocheck
import { Item } from '../..';
import { WorkItemValidation } from '../../../../../utils/Validation';
import { Date, Input } from '../../../Shared';
import { Editor } from '../../..';
import { Items } from '../Components';
import { Container, Liner, Linerier } from './Components'
import { useCallback, useEffect, useRef, useState } from 'react';
import { Employment as Work } from '../../../../../utils/operations/Resume';
import { debounce } from 'lodash';
const Employment: any = (props: any) => {
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
const [loading, setLoading] = useState(true);
const editorsRef = useRef({})
const currentIndexRef = useRef('')
console.log(props, 'props', editorsRef, 'editorsRef')
useEffect(() => {
if (loading === true) {
const refs = {}
props.resume.employmentHistory.positions.map(
(position: any, index: number) =>
refs[index] = position.description
)
editorsRef.current = refs;
setLoading(false);
}
}, [])
const isFocusedRef = useRef(false);
const autoUpdateCallbackRef = useRef(null);
const callWorkDescription = useCallback(
debounce((props, currentIndex, editor) => {
Work.Description(props, currentIndex, editor);
currentIndexRef.current = ''
}, 1000),
[]
);
const handleDescription = (e: any, index: number) => {
currentIndexRef.current = index
editorsRef.current = {
...editorsRef.current,
[index]: e,
}
callWorkDescription(props, index, e)
};
useEffect(() => {
const intervalId = setInterval(() => {
if (isFocusedRef.current) autoUpdateCallbackRef.current?.();
}, 1000);
return () => clearInterval(intervalId);
}, []);
const handleFocus = () => isFocusedRef.current = true;
const handleBlur = () => isFocusedRef.current = false;
return (
<Container>
{
loading === false &&
<Items>
{
props.resume.employmentHistory.positions.map(
(position: any, index: number) => {
return (
<Item delete={() => Work.Delete(props, index, editorsRef)}
>
<Liner style={{ width: '100%' }}>
<Editor
id={`editor-${index}`}
label="Description"
value={editorsRef.current[index] && editorsRef.current[index] || ''}
placeholder="Brief description of the role..."
onChange={(e) => handleDescription(e, index)}
onFocus={handleFocus}
onBlur={handleBlur}
/>
</Liner>
</Item>
)
}
)
}
</Items>
}
</Container >
)
}
export default Employment;