What is the best approach to share value of useSharedValue between Parent and Child

[raminious]

Some of my components need to be separated as follows:

// Parent
import { TestShared } from './TestShared'

export function MyCanvas() {
  const radius = useSharedValue(10)

  return (
    <View>
      <Canvas>
        <BackdropBlur
          blur={4}
          clip={Skia.Path.Make()?.addCircle(
            70,
            70,
            radius.value,
          )}
        >
          <Fill color="rgba(255, 255, 255, 0.1)" />
        </BackdropBlur>
      </Canvas>

      <TestShared radius={radius} />
    </View>
  )
}

// Child
export function TestShared({ radius }: { radius: any }) {
  const handleChange = () => {
    radius.value = 50
  }

  return (
      <Button title="change radius" onPress={handleChange} />
  )
}

Here I should update a useSharedValue in child component and reflect the value to Canvas which is also parent.
My use case is much more complex than this, and I have only simplified the problem here.

I tried useDerivedValue, useValue and useSharedValueEffect with no success. Could you please advise me on how to accomplish this?

Thank you in advance.

[raminious]

My problem was solved using runOnJs. I'm not sure how bad it is