Visual Artifacts appearing on JPanel

I am trying to create a program with 2 JPanel using BorderLayout. The center panel is for random drawing of rectangle while the south panel is for the buttons.

I am getting a weird image of the button on the top left corner of the JFrame whenever I hover the mouse cursor over the North or South button. I did some research and found out that this could be the reason for having a transparent background. I tried using super.paintComponent(g) for the panel but the rest of the rectangles drawn earlier disappear. I need the rectangles to stay in the JPanel but not the weird image on the top left.

I don't know what I am doing wrong, hopefully someone can help or give some clue on how to solve this problem.

    public class TwoBRandomRec extends JFrame{

    private static final long serialVersionUID = 1L;

    public static void main(String[] args) {
        TwoBRandomRec rec = new TwoBRandomRec();

        rec.setSize(500,500);
        rec.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        rec.setVisible(true);
    }

    public TwoBRandomRec() {
        //Create the buttons
        JButton north = new JButton("North");
        JButton south = new JButton("South");
        DrawPanel drawPanel = new DrawPanel(500,500);

        JPanel southP = new JPanel();
        southP.add(south);
        southP.add(north);

        this.add(drawPanel, BorderLayout.CENTER);
        this.add(southP, BorderLayout.SOUTH);

        this.setTitle("TwoButtonRandomRec");
        this.pack();        
    }

    public class DrawPanel extends JPanel {

        private static final long serialVersionUID = 1L;

        private Random rand = new Random();
        private int x,y,xSize,ySize;
        private int height,width;

        public DrawPanel(int w,int h) {
            width = w;
            height = h;
        }
        public void RandomX(){
             x=rand.nextInt(width-1);
             xSize=rand.nextInt(width-x);
         }

         public void RandomY(){
             y=rand.nextInt(height-1);
             ySize=rand.nextInt(height-y);
         }

         public Color RandomColour(){
             rand.nextInt(height);
             return new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255));
         }

        @Override
        protected void paintComponent(Graphics g) {
            RandomX();
            RandomY();

            g.setColor(RandomColour());
            g.fillRect(x, y, xSize, ySize);
            try {
                Thread.sleep(50);

            } catch (InterruptedException e) {  
            }

            repaint();
        }
    }
}

You're not calling super.paintComponent

protected void paintComponent(Graphics g) {
    super.paintComponent(g); // <-- Insert me here and watch problem go away
    RandomX();
    RandomY();

    g.setColor(RandomColour());
    g.fillRect(x, y, xSize, ySize);
    try {
        Thread.sleep(50); // <-- This is an INCREDIBLY bad idea, NEVER, EVER do this

    } catch (InterruptedException e) {  
    }

    repaint(); // <-- This is a bad idea, watch CPU max out...
}

You are obligated to call super.paintComponent to ensure that the paint chain is upheld correctly and things like opacity and cleaning up of the graphics context takes place.

The Graphics object is shared between components through a single repaint pass, failure to honor the correct paint chain will result in, well, problems like yours

Never update the UI in anyway from any paint method (this includes calling repaint), this is just causing your paint method to be recalled, over and over and over...until you CPU hits 100% and program hangs.

Never, EVER do any time consuming or block operations within the paint methods (or the UI generally), this will make it look like the program as hung and make the users upset (you think zombi hordes are bad :P). Blocking in this way prevents the EDT from responding to paint requests...

I'd recommend having a read through: