X-Frame-Options inside React App (CRA) seem like doesn't work

Question

I'm trying to know about X-Frame-Options (a common security header). So i run react app in localhost:3000. I also run NodeJS-ExpressJS app in port 5000.

My localhost:5000 server look like: (server/index.js)

const app = express();
app.use(
  cors(
    {
      origin: "http://localhost:3000",
      credentials: true,
    }
  )
);
app.use(express.json());

app.get("/", (req, res) => {
  **res.send(
    "<div> <iframe src='http://localhost:3000' width='500px' height='500px'></iframe><h1>Hello world</h1></div>"
  );**
});

app.use("/api/user", userRouter);

const server = app.listen(process.env.PORT, () => {
  console.log(`Server started on ${process.env.PORT}`);
});

I also config X-Frame-Options in React app by npm run eject and modify webpack.config.js to add this config:

    devServer: {
      // other devServer options...
      headers: {
        "X-Frame-Options": "DENY",
      },
    },

after i run both react app and expressjs app in port 3000 and port 5000, and open localhost:5000 it still return iframe of localhost:3000

localhost:5000 and still have reactapp iframe

I dont see X-Frame-Options in response header too. response header in react app port 3000

i expeted that when update X-Frame-Options to "DENY" in react app, other application can't iframe to react app for prevent clickjacking purpose.

Node: v16.16.0 React: 18.2.0 Express: 4.17.2 OS: Ubuntu 20.04 I'm using yarn, not npm in both react and express, doesn't it effect?

please help me, thanks so much!