How can I trigger re-render of an element (which uses state) in a callback function?

I am currently using React (TSX) and have run into a problem regarding states. I am fairly new to this topic so I apologize if this is blatantly obvious to fix..

Consider a callback function testComponent, which, when a button is pressed, renders a new component each time.

Within this component, there will be a select tag and an input tag, and based on what is selected, the input tag must also update.

The select tag will display the name of the object, and the input tag will display its ID, for example.

And, all of the selectedOptions will start off with a default value of options[0] which happens in a useEffect.

This is a recreation of my problem just using the word test instead so that its easier to understand (less context needed). The idea is that every time the select element changes, it should also update the input tag.

export default function CreateTestComponent() {
  const options: any[] = [
    {
      id: 1,
      name: "Test 1"
    },
    {
      id: 2,
      name: "Test 2",
    },
    {
      id: 3,
      name: "Test 3"
    }
  ]
  const [selectedOptions, setSelectedOptions] = useState<any[]>([options[0]]);
  const [testComponentIndex, setTestComponentIndex] = useState<number>(0);
  const [components, setComponents] = useState<any[]>([]);

  useEffect(() => {
    setComponents([testComponent(0)]);
    setTestComponentIndex((old) => old + 1);

    for (let i = 0; i < options.length; i++) {
      setSelectedOptions((old) => {
        const temp = [...old];
        temp[i] = options[0];
        return temp
      })
    }
  }, [])


  const testComponent = (index: number) => {

    return (
      <div className="flex flex-row gap-5" id={`${index}`}>
        <select
          onChange={((e) => {
            const id = e.target.value;
            setSelectedOptions((old) => {
              const temp = [...old]
              temp[index] = options.filter((option) => option.id == id)[0];
              return temp;
            })
          })}>
          {options.map((option, index: number) => {
            return (
              <option key={index} value={option.id}>
                {option.name}
              </option>
            );
          })}
        </select>
        <input readOnly value={selectedOptions[index].id} />
      </div>
    )
  }

  return (
    <>
      <button type="button" onClick={() => {
        setTestComponentIndex((old) => old + 1)
        setComponents([...components, testComponent(testComponentIndex)]);
      }} className="bg-black text-white rounded px-3 py-1">
        Add a Component
      </button>
      <div>
        <h1>Component testing!</h1>
        <div>
          <ul className="list-none">
            {components.map((component: any, index: number) => {
              return (
                <li key={index}>
                  <div className="flex flex-row gap-5">
                    {component}
                  </div>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </>
  )
}

This code will work in a .tsx file.

As you can see, the state is updating, but the input tag doesn’t update. I have done an annoying amount of research trying to figure out what is happening, and I am pretty sure that because it is inside a callback function in which the state is not continuously updated (which would, in turn, trigger a rerender).

I tried doing a bunch of things to get around this obstacle. Namely, I tried useRef(), but it doesn’t have the capability of rerendering, which only useState appears to do.

I went through a bunch of other things but none of them got around this problem because none of them combatted the problem that is that the state is not the same outside versus inside the callback function.

If there is no way around having an up-to-date state within a callback function, what are some other alternatives I could try so that I could still have the ability of pressing a button and generating a new instance of a component each time?

Thanks