Cannot update a component (`Back`) while rendering a different component - react-native

Question

I know this question has been answered many times, but I have looked through all the answers and none of them look like my case. I have a JSX component which is basically a header, and in it I have placed another JSX component which is a backpress button. In that backpress button, I have an SVG which is wrapped inside of a Pressable. Now I want the color of the SVG to change when pressed. To achieve that, I have the following code:
function Back({style, onPress}) {
const [pressed, setPressed] = useState(false);
const [color, setColor] = useState('white');
// const Change = useCallback(async (colour) => {
// setColor(colour);
// }, [color]);
useEffect(async () => {
if (pressed) {
await setColor('#c5e2e8');
} else {
await setColor('white');
}
}, [color, pressed]);
return (
<Pressable
style={({pressed}) => {
pressed ? setPressed(true) : setPressed(false);
[style];
}}
onPress={onPress}>
<Svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height={36}
width={36}
viewBox="0 0 512 512"
fill={color}>
<Path d="somerandompath" />
</Svg>
</Pressable>
);
}
The problem is that when I press on the back button, I get the warning Cannot update a component (Back) while rendering a different component
As you can see, I tried to put it inside an useEffect. However, it did not help solve my problem.

Answer 1

Okay I have tried to solve this for many hours, and 5 mins after posting here I managed to solve it! Here is the answer:
Make use of the OnPressIn and OnPressOut events of the Pressable component. I removed the entire styles. Here is the new code:
function Back({style, onPress}) {
const [color, setColor] = useState('white');
const onPressIn = async () => {
await setColor('#c5e2e8');
}
const onPressOut = async () => {
await setColor('white');
}
return (
<Pressable
onPressIn={onPressIn}
onPressOut={onPressOut}
onPress={onPress}>
<Svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
height={36}
width={36}
viewBox="0 0 512 512"
fill={color}>
<Path d="somepathcode" />
</Svg>
</Pressable>
);
}