WebSocket prop won't be propagated to functional component - reactjs

Question

I have a React web app that uses WebSocket. Some of the child components of my main App component need to send messages to the WebSocket server, therefore I am passing the WebSocket object from App down to the respective children as props. Since the URL for the WebSocket server needs to be defined by the user in an HTML form, the WebSocket object is undefined at the initial launch of the app (that's why it gets defined later in the callback function of the input handler using setWebSocket).
When I define my child component Map as class-based component, everything works fine. However, I want to use functional components throughout the application, and when I define Map as functional component, the ws prop won't be available (in the example below: printing "no ws"). Interestingly, this only affects the ws prop. Any other props (here as an example: data) get propagated well. What am I missing here?
EDIT:
It turns out to be due to nouislider-react. In my original post, I simplified the slider component part, since I couldn't imagine it was because of that. I now added the nouislider code. Any suggestions why this is preventing the ws prop from being passed only in case of functional components?
App.js
const App = () => {
const [webSocket, setWebSocket] = useState(undefined);
const [data, setData] = useState(null);
const getUserInput = (userInput) => {
setWebSocket(() => {
let url = "ws://" + userInput;
return new WSHandler(url);
});
}
return (
<Navbar parentCallback={getUserInput} />
<Map ws={webSocket} data={data} />
);
}
WSHandler.js
class WSHandler {
constructor(url) {
this.ws = new WebSocket(url);
this.binaryType = 'arraybuffer';
this.onopen = () => { ... }
this.onerror = () => { ... }
this.onmessage = () => { ... }
}
}
Map.js - functional
const Map = (props) => {
const onInputChange = () => {
if (props.ws) console.log("ws here");
else console.log("No ws"); //GOES HERE
if (props.data) console.log("data here"); //GOES HERE
else console.log("No data");
}
return (
<Nouislider
start={0}
range={{min: 0, max: 100}}
step={1}
onChange={onInputChange}
disabled={false}
/>
);
}
Map.js - class-based
class Map extends Component {
onInputChange = () => {
if (this.props.ws) console.log("ws here"); // GOES HERE
else console.log("No ws");
if (this.props.data) console.log("data here"); //GOES HERE
else console.log("No data");
}
render() {
return (
<Nouislider
start={0}
range={{min: 0, max: 100}}
step={1}
onChange={onInputChange}
disabled={false}
/>
);
}
}

Answer 1

I am able to get this working by adding a } closing bracket to the WSHandler as well as making sure there is a trigger in the Slider component
const Slider = (props) => { return (
<div><input type="submit" onClick={props.onChange}/></div>)
}