ReactJS: Updating one state variable based on another state variable causes the update variable to not render

I'm a ReactJS notive and while related questions on this topic have been asked, but I couldn't find the answer I'm looking for.

In ReactJS, I have two state variables. When one changes (let's call it A), I want the other (B) to change. My code currently does this correctly; when I drop breakpoints or log to console, B changes correctly when A changes. However, React does not render the updated B until A changes again. What is the cause, and what is the right React pattern to ensure B renders?

Snippets of my code (happy to answer more)

This is my variable A:

  const [prompt, setPrompt] = useState(params.prompt);

This is my variable B:

  let defaultPromptsResultsArray = [{
    isLoading: true,
    prompt: params.prompt,
    counter: 0,
    URIs: [default_uri]
  }]

  const [promptsResultsArray, setPromptsResultsArray] = useState(defaultPromptsResultsArray);

This is the useEffect that depends on prompt (my state variable A):

  useEffect(() => {

    // Take 0 for the newest prompt.
    const newBackendEventSource = new EventSource(
      url,
      {withCredentials: false})

    console.log('SSE created!');

    newBackendEventSource.addEventListener('open', () => {
      console.log('SSE opened!');
    });

    newBackendEventSource.addEventListener('error', (e) => {
      console.log('SSE error!');
      if (newBackendEventSource.readyState === EventSource.CLOSED) {
        // Connection was closed.
        console.log('SSE readyState is CLOSED')
      }
      console.error('Error: ',  e);
    });

    newBackendEventSource.addEventListener('close', (e) => {
      console.log('SSE closed!');
      const data = JSON.parse(e.data);
      console.log("close data: ", data);
      newBackendEventSource.close();
    });

    newBackendEventSource.addEventListener('message', (e) => {
      const data = JSON.parse(e.data);
      console.log("message data: ", data);

      // Use React Updater function to prevent race condition.
      // See https://stackoverflow.com/a/26254086/4570472
      setPromptsResultsArray((prevPromptsResultsArray) => {
        // Since we preprend new results, we need to compute the right index from
        // the counter with the equation: length - counter - 1.
        // e.g., For counter 2 of a length 3 array, we want index 0.
        // e.g., For counter 2 of a length 4 array, we want index 1.
        // e.g., For counter 3 of a length 7 array, we want index 4.
        // Recall, the counter uses 0-based indexing.
        const index = prevPromptsResultsArray.length - data.counter - 1

        prevPromptsResultsArray[index] = {
          isLoading: false,
          prompt: prevPromptsResultsArray[index].prompt,
          counter: prevPromptsResultsArray[index].counter,
          URIs: [data.uri]}

        return prevPromptsResultsArray
      });
    });

    // Add new backend event source to state for persistence.
    setBackendEventSources(backendEventSources => [
      newBackendEventSource,
      ...backendEventSources])

  }, [prompt]);

This is where my promptsResultsArray is used in the DOM:

          {promptsResultsArray.map((promptResults) => {
            const promptResultsKey = [promptResults.prompt, promptResults.counter].join("_");
            return (
              // Add a fragment ( a fake div ) so we can return 2 elements.
              <Fragment key={promptResultsKey}>
                <p key={`${promptResultsKey}_p1`}>Prompt: {promptResults.prompt}</p>
                {/* Creating keys from multiple values: https://stackoverflow.com/a/40425845/4570472*/}
                <ImageList cols={1} key={promptResultsKey}>
                  {promptResults.URIs.map((URI) => (
                    // Refactor to give each URI its own unique integer ID.
                    <ImageListItem key={[promptResults.prompt, promptResults.counter, 0].join("_")}>
                      <img
                        src={URI}
                        alt={promptResults.prompt}
                        style={{height: 260, width: 1034}}
                      />
                    </ImageListItem>
                  ))}
                </ImageList>
              </Fragment>
            )
          })}

promptsResultsArray is only updated when prompt is updated. Why? How do I ensure promptsResultsArray is also updated when changed by the SSE?