I can see multiple problems with your code:

1. you're calling the event mouseDown and setting the state but you're using addRectangle for your condition instead of just calling it as a function. This will most of the time introduce race condition issues.

2. you then return addRectangle() instead of adding it on an array, this is the reason why the previous rectangle is replaced.

What I suggest is:

const svgRef = useRef<SVGSVGElement>(null);
    const divRef = useRef<HTMLDivElement>(null);
    const { xCord, yCord } = useMousePosition({ divRef });
    const [last_mousey, set_last_mousey] = useState(0);
    const [mousex, set_mousex] = useState(0);
    const [mousey, set_mousey] = useState(0);
    const [rectx, setrectx] = useState(0);
    const [recty, setrecty] = useState(0);
    const [rectwidth, setrectwidth] = useState(0);
    const [rectheight, setrectheight] = useState(0);


   const [rects, setRects] = useState([]);

    const mouseDown = () => {
        setRects(rects.concat(addRectangle(xCord, yCord)));
      };
    
      const mouseMove = () => {
        set_mousex(xCord);
        set_mousey(yCord);
      };
    
      const addRectangle = (last_mousex, last_mousey) => {
          const width = Math.abs(mousex - last_mousex);
          const height = Math.abs(mousey - last_mousey);
    
          const rx = mousex < last_mousex ? mousex : last_mousex;
          const ry = mousey < last_mousey ? mousey : last_mousey;
          rectx!==rx && setrectx(rx);
          recty!==ry && setrecty(ry);
          rectheight!==height && setrectheight(height);
          rectwidth!==width && setrectwidth(width);
    
          return (
            <rect
              x={rx}
              y={ry}
              height={height}
              width={width}
            />
          );
      };

  return (
    <div className="App" ref={divRef}>
       <svg
        id="svg"
        ref={svgRef}
        onMouseDown={mouseDown}
        onMouseMove={mouseMove}
      >
        {rects.length > 0 ? (
          rects.map(rect => rect)
        ) : (
          <rect
            x={rectx}
            y={recty}
            height={rectheight}
            width={rectwidth}
          />
        )}
      </svg>
    </div>
  );

• I removed last_mousex, mousedown, and last_mousey states and pass them directly.
• I changed the mouseDown function and removed the mouseUp they should do the same.
• Added rects so they its an array.
• NOTE: I did not add typescript changes on this one, just add it on your own so you can customize it.

You can achieve it like this

1. Save the rectangles to another state array

const [rectArray, setRectArray] = useState<Array<JSX.Element>>([]);

  const addRectangle = () => {
    if (mousedown) {
      const width = Math.abs(mousex - last_mousex);
      const height = Math.abs(mousey - last_mousey);

      const rx = mousex < last_mousex ? mousex : last_mousex;
      const ry = mousey < last_mousey ? mousey : last_mousey;
      rectx !== rx && setrectx(rx);
      recty !== ry && setrecty(ry);
      rectheight !== height && setrectheight(height);
      rectwidth !== width && setrectwidth(width);

      setRectArray((prevArr) => [
        ...prevArr,
        <rect x={rx} y={ry} height={height} width={width} />
      ]);
    }
  };

2. You should call addRectangleat the last line of mouseUp

  const mouseUp = () => {
    setMouseDown(false);
    addRectangle();
  };

3. Then you can iterate over them to show all the rectangles

  return (
    <div className="App" ref={divRef}>
      <svg
        id="svg"
        ref={svgRef}
        onMouseDown={mouseDown}
        onMouseUp={mouseUp}
        onMouseMove={mouseMove}
      >
        {rectArray.map((rect) => rect)}
      </svg>
    </div>
  );