interface OpenOrders {
  id: string;
  overlayId: string;
}

export interface OpenOrdersByIds {
  [key: string]: OpenOrders[];
}


export interface AccountOpenOrder {
  apiKeyId: string;
  apiKeyName: string;
  id: string;
  symbol: string;
  type: string;
  price: number;
  quantity: number;
  side: string;
  status: string;
}

export const CandleChart = ({
  symbolName,}: CandleChartProps) => {
  const chart = useRef<Chart|null>(null);
  const paneId = useRef<string>("");
  const [openOrdersIds, setOpenOrdersIds] = useState<OpenOrdersByIds>({});
  const openOrders = useSelector((state: AppState) => state.openOrdersSlice.openOrders[`${selectedSingleApiKey || -1}`]); // Record<string, Record<string, AccountOpenOrder>>;

  useEffect(() => {
    if(!openOrdersIds) return;

    Object.keys(openOrdersIds).forEach(key => {
      if (key !== symbolName) {
        openOrdersIds[key].forEach(overlay => {
          chart.current?.removeOverlay({
            id: overlay.overlayId,
          });
        });

        const updatedOpenOrders = {...openOrdersIds};
        delete updatedOpenOrders[key];

        setOpenOrdersIds(updatedOpenOrders);
      }
    });
  }, [symbolName]);

  return (<>
  {
              showOpenOrders && openOrders && kline && Object.values(openOrders).map((order) => {
                if(order.symbol === symbolName) {
                  if(openOrdersIds && openOrdersIds[order.symbol]) {
                   
 if (openOrdersIds[order.symbol].some(o => o.id === order.id.toString())) {
                    
 return null;
                    } else {
                      return <DrawOpenOrders
                        key={order.id}
                        chart={chart}
                        paneId={paneId}
                        settingOpenOrder={{
                          id: order.id,
                          symbol: order.symbol,
                          price: order.price,
                          side: order.side,
                          quantity: order.quantity,
                        }}
                        priceClose={kline.close}
                        openOrdersIds={openOrdersIds}
                        setOpenOrdersIds={setOpenOrdersIds}
                        cancelOpenOrderHandle={cancelOpenOrderHandle}
                      />;
                    }
                  } else {
                    return <DrawOpenOrders
                      key={order.id}
                      chart={chart}
                      paneId={paneId}
                      settingOpenOrder={{
                        id: order.id,
                        symbol: order.symbol,
                        price: order.price,
                        side: order.side,
                        quantity: order.quantity,
                      }}
                      priceClose={kline.close}
                      openOrdersIds={openOrdersIds}
                      setOpenOrdersIds={setOpenOrdersIds}
                      cancelOpenOrderHandle={cancelOpenOrderHandle}
                    />;
                  }
                }
              })
            }

  </>);
};



const DrawOpenOrders = (
  {
    chart,
    paneId,
    settingOpenOrder,
    priceClose,
    openOrdersIds,
    setOpenOrdersIds,
    cancelOpenOrderHandle,
  }: DrawOpenOrdersProps) => {
  const {id, price, quantity, side, symbol} = settingOpenOrder;
 createOverlayHandler();
 const createOverlayHandler = () => {
    const overlay = chart.current?.createOverlay({
      name: "customOverlay",
 if (overlay) {
      setOpenOrdersIds((prev: OpenOrdersByIds) => {
        const symbolOrders = prev[symbol] || [];
        const orderExists = symbolOrders.some((order) => order.overlayId === overlay);

        if (!orderExists) {
          const newOrder = {id: id.toString(), overlayId: overlay};
          const updatedSymbolOrders = [...symbolOrders, newOrder];

          return {...prev, [symbol]: updatedSymbolOrders};
        } else {
          return prev;
        }
      });
    }
  };


};

export default DrawOpenOrders;


есть такое сощдание фигуры и добавления в setOpenOrdersIds. 


openOrders  из redux приходят ордера, они появляются и исчезают, если появляются, то они рисуются в компоненте DrawOpenOrders, если исчезают, то нужно удалять из openOrdersIds