如題，有一個React Radio操作上的疑問，就是我的資料結構如下：

const materialList = [  
    {
      id:1,
      kindName: '溫度',
      subList:
      [
        {
          id: 1,
          name: '95'
        },
        {
          id: 2,
          name: '65'
        },
      ]
    },
    {
      id:2,
      kindName: '熟度',
      subList:
      [
        {
          id: 3,
          name: '七分'
        },
        {
          id: 4,
          name: '五分'
        },
      ]
    },
    {
      id:3,
      kindName: '容量',
      subList:
      [
        {
          id: 5,
          name: '500ml'
        },
        {
          id: 6,
          name: '700ml'
        },
      ]
    },
  ]

想用React做出每個規格分類底下的Radio單選按鈕
大概長下面這樣：

我在return區用雙層map第一層先map出標題(有用Chakra Ui 所以html標籤是Text)，第二層用第一層解出來物件裡的subList做第二次map把選項給loop出來，可是Radio在沒使用 checked屬性時他會是多選的，依照網路上教學，使用 checked屬性給他一個state去判斷現在是哪一個值，他才會是單選的。

程式碼如下，html標籤因為有用Chakra UI所以會不太一樣。

{materialList}.map(m => (
  <Flex key={m.id}>
    <Text>{`${m.name}: `}</Text>
      <Stack direction='row'>
        {m.subList.map(t => (
          <Flex key={t.id}>
            <input 
              type="radio" 
              value={t.id} 
              onChange={() => setValue(t.id)} 
              checked={value}
            />
            <Text>{t.name}</Text>
          </Flex>
        ))}
      </Stack>
  </Flex>
))}

現在有個問題是，我要送出的資料結構需要是如一開始materialList
一樣，只是subList裡面都只有一個object，就是radio所選的那個，但是用checked和onChange的方式做單選，會因都吃同一個value所以所有Radio選項最終都只牽涉到那一個value值，不會按照標題分類。

要怎樣才能做到我的Radio選擇的值，每個標題裡的不互相影響呢？
而且我不同地方materialList和subList裡的物件數都是變動的，要怎樣做才能比較好達到效果呢?

這問題真的想破頭了，還煩請高手大大幫忙解惑><