Why do I need to set font-weight when setting @font-face?

I am working on a React project.

source

The folder structure where the font file is located is as follows.

- src
    assets
       Fonts
           - NotoSansKR-Bold.otf
           - NotoSansKR-DemiLight.otf
           - NotoSansKR-Medium.otf
           - NotoSansKR-Regular.otf

@font-face is set as follows in App.css in root.

@font-face {
  font-family: 'Noto Sans KR-Bold';
  src: url('./assets/Fonts/NotoSansKR-Bold.otf');
}

@font-face {
  font-family: 'Noto Sans KR-Medium';
  src: url('./assets/Fonts/NotoSansKR-Medium.otf');
}

@font-face {
  font-family: 'Noto Sans KR-Regular';
  src: url('./assets/Fonts/NotoSansKR-Regular.otf');
}

@font-face {
  font-family: 'Noto Sans KR-DemiLight';
  src: url('./assets/Fonts/NotoSansKR-DemiLight.otf');
}

And in the components in src/pages/, font is used as follows(using styled-components).

const UserName = styled.div`
  margin-left: 6px;
  font-family: 'Noto Sans KR-Regular';
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  color: #262e33;
`;

Problem

The result is the same no matter which one of Bold, Medium, Regular, and DemiLight is set. In other words, it seems that the font style is not applied.

As a result of the search, it was found that if the font-weight is specified as follows, the matching font is applied when the corresponding font-weight and font-family are specified.

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 100;
  src: url("styles/fonts/NotoSansKR-Light.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Light.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Light.otf") format('truetype')
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: normal;
  src: url("styles/fonts/NotoSansKR-Regular.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Regular.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Regular.otf") format('truetype')
}


@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: 500;
  src: url("styles/fonts/NotoSansKR-Medium.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Medium.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Medium.otf") format('truetype')
}

@font-face {
  font-family: 'Noto Sans CJK KR';
  font-style: normal;
  font-weight: bold;
  src: url("styles/fonts/NotoSansKR-Bold.woff2") format('woff2'),
  url("styles/fonts/NotoSansKR-Bold.woff") format('woff'),
  url("styles/fonts/NotoSansKR-Bold.otf") format('truetype')
}

Question

However, in my opinion, Bold, Medium, etc. are the difference in weight after all, and I do not know why the weight should be specified even though the otf file is divided by font thickness. Why are my settings wrong?