Selectのoptionにselectedをつけない方法

前提

React.(Next.js)でプルダウンのフォームコンポーネントを作成しています。
selectとしては親コンポーネント側からも期待通り動いている状況です。

実現したいこと

optionのselectedをつけないようにしたいです。（もしくは選択肢と一致させるでも可）
外部から選択肢が変わった際に、再度選択できなくなるためです。
(selectedが入っているoprtionを選択しても選択自体が無視され選択肢表示も変わらない)

該当のソースコード

js
1import styled from "styled-components";
2
3type Props = {
4  nowValue: string;
5  setState: React.Dispatch<React.SetStateAction<string>>;
6  listData: { label: string; value: string }[];
7};
8
9const Select = styled.select`
10  outline: none;
11  border-radius: 4px;
12  /* 略 */
13`;
14
15//中略
16
17export default ({ ...props }: Props) => {
18  return (
19    <Select
20      onChange={(event) => {
21        props.setState(event.target.value);
22      }}
23      value={props.nowValue}
24    >
25      {props.listData.map((data, index) => (
26        <option key={index} value={data.value}>
27          {data.label}
28        </option>
29      ))}
30    </Select>
31  );
32};

試したこと

optionにselected属性を追加してみましたが、
下記のようにselectのvalueでやってくれと怒られてしまいました。

next-dev.js?3515:25 Warning: Use the defaultValue or value props on <select> instead of setting selected on <option>.

js
1        <option
2          key={index}
3          value={data.value}
4          selected={false} //追加 (試したこと1)
5          selected={data.value === props.nowValue} //追加 (試したこと2)
6        >
7          {data.label}
8        </option>

試したこと(回答コメントを踏まえ)

テキストフォームと連動している仕様上、
nowValueがlistDataに含まれないケースがあり、整合性が取れていませんでした。

下記のように、含まれない場合は1つ目の選択肢になるように変更してみましたが、解消しませんでした。
また、setStateに送った値がnowValueになるまでの途中で変換されていることもありませんでした。

js
1<Select
2  onChange={(event) => {
3    props.setState(event.target.value);
4  }}
5  value={props.listData.find((e) => e.value === props.nowValue) ? props.nowValue : props.listData[0].value}
6>